花了2天時間研究云服務和寶塔面板，終于上傳成功了，現在做一個詳細記錄，方便廣大網友查看，廢話不多說直接開始

騰訊云服務器購買并且安裝寶塔面板

購買云服務器安裝寶塔面板，在購買的時候可以選擇安裝寶塔面板

然后找到應用管理，先獲取面板用戶名和密碼，然后使用公網IP+埠+tencentcloud登錄

配置寶塔面板

登錄后可以選擇Nginx或者Apache，這邊我是安裝是Nginx，首先要修改用戶名和密碼還有埠號，這樣服務器更加安全，如果埠修改為45678，安全入口修改為/xiaopang，用戶名和密碼為admin，123，那么下次登錄地址就是http://1.1.1.1:45678/xiaopang，賬號密碼是admin和123，請牢記賬號和密碼

需要先放行埠，如果沒有放行埠會打不開登錄地址，沒有放行埠把賬號密碼改了登錄不進去可以在服務器管理放行埠


然后添加網站站點，需要創建FTP和資料庫，系結域名和IP地址，域名和IP是訪問網站的入口

然后用FTP工具登錄FTP，到時候上傳專案需要用到，先放行21和39000-40000埠，21是默認FTP埠，39000-40000是FTP被動模埠范圍，必須要放行才能連接成功，（我用的是8utf，還不錯，免費的）

連接成功后就可以了，然后再去測驗一下資料庫，先去放行3306MySQL默認埠，然后用Navicat連接，我們還要設定一下訪問資料庫的權限，設定指定IP，不然會連接不上

暫時配置和FTP和MySQL就可以了，剩下的后面會講到

vue+node實作檔案上傳

action為none，這是組件提交地址，需要自定義上傳路徑所以選擇none，然后設定auto-upload為false，因為upload組件是自動上傳的，我們不需要

<el-upload class="upload-demo" :action="'none'" :file-list="fileraw" :auto-upload="false" drag ref='upload' :before-remove="onRemove" :on-change="onChange" multiple>
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">將檔案拖到此處，或<em>點擊上傳</em></div>
	<div class="el-upload__tip" slot="tip">只能上傳小于50M圖片檔案或視頻檔案</div>
</el-upload>

重點來了，在onChange里面把接收的file里面的raw放到this.fileraw中，file里面的raw才是真正的檔案物件，我這邊設定了上傳檔案的格式和大小，有其他需要的可以把格式換一下，建議設定大小，服務器貴的設定大一點，便宜的設定小一點，不然要上傳很久，path是上傳檔案地址，本地和服務器的路徑不一樣，建議在本地測驗好了之后再修改路徑再打包代碼上傳到服務器

data() {
	return {
		fileraw:[],
	};
},
methods: {
	onRemove(file,filelist){//檔案串列移除
		this.fileraw.splice(this.fileraw.indexOf(file.raw),1)
	},
	onChange(file,filelist){//檔案上傳
		if(file.raw.type == "video/mp4" || file.raw.type == "image/jpeg" || file.raw.type == "image/png" || file.raw.type == "video/quicktime"){
			if(file.raw.size /1024 /1024 > 50){
				this.$message.error("請上傳小于50M的視頻或圖片！")
			}else{this.fileraw.push(file.raw)}
		}else{
			this.$message.error("請上傳圖片或視頻！")
		}
	},
	submitData(){//提交檔案
		if(this.fileraw == ''){
			this.$message.error("請上傳檔案！")
		}else{
			let formData = new FormData();
			this.fileraw = Array.from(this.fileraw)
			this.fileraw.forEach(file => {
				formData.append('file', file);
			})
			var path = this.$route.query.name01 + '\\' + this.$route.query.name02 + '\\';//本地上傳檔案的路徑
			//var path = this.$route.query.name01 + '/' + this.$route.query.name02 + '/';//服務器規范
			formData.append('path',path)
			this.$axios({
				method:"POST",
				url:this.baseUrl + "/uploadFile",
				data:formData,
			}).then((res)=>{
				console.log(res)
				if(res.data.status == 200){
					his.$message({message:res.data.data,type: 'success'});
				}else{
					this.$message.error(res.data.data)
				}
			}).catch((err)=>{
				console.log(err)
			})
		}
	},
},   

講一下Vue關于本地和服務器的不同
在config—>dev.env.js中的是開發模式，而config—>peod.env.js是線上模式，所以只要設定一個全域變數就可以隨時切換開發和線上介面地址了，在main.js中加上這一句

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.prototype.baseUrl = process.env.NODE_ENV==="production"?"http://1.1.1.1:3030":"/api"

然后在介面的URL寫上this.baseUrl + "/介面名稱"就可以了
再說一下為什么要請求*/api/介面名稱*，請求后端介面是需要跨域的，所以要設定跨域
在config—>index.js中設定proxyTable就可以了

proxyTable: {
		"/api":{
			target:"http://localhost:3030",//需要跨域的主域名，這是我本地運行node檔案的介面地址
			changeOrigin:true,//允許跨域
			pathRewrite:{
				"^/api":"/"
			},
		}
	},

配置mian.js和config—>index.js中的代碼后，請求的介面地址在開發模式是http://localhost:3030/login，在線上模式的地址是http://1.1.1.1:3030/login

接下來就是node后端檔案代碼了
首先安裝fs，multiparty模塊，multiparty是獲取檔案資料，fs是進行重命名和保存到指定路徑的模塊

router.post('/uploadFile',async(req, res) => {//上傳檔案
	let form = new multiparty.Form()
	form.keepExtensions = true; //是否保留后綴
	form.parse(req, function(err, fields, files) { //其中fields表示你提交的表單資料物件，files表示你提交的檔案物件
		let save_path = "C:\\檔案\\"
		if (err) {
			res.send({"status":201,"message":err});
		} else {
			let file_list = []
			if (!files.file) res.send({"status":201,"message":err,"data":"上傳失敗！"});
			else {
				files.file.forEach(file => {
					//file.path檔案原路徑
					//save_path指定盤
					//fields.path動態路徑
					//file.originalFilename檔案名
					fs.rename(file.path,save_path + fields.path + file.originalFilename, function(err) {
						if (err) {
							res.send({"status":201,"message":err,"data":"上傳失敗！"});
						} else {
							res.send({"status":200,"data":"上傳成功！"});
						}
					});
				})
			}
		}
	})
});

部署node+vue專案并且運行成功

到了最關鍵的一步了，想想還有點小激動，終于要寫完了，好累啊，廢話不多說了，開始！

首先要到寶塔安裝PM2，這個是運行node的一個插件，能夠24小時運行node檔案
然后用FTP工具把node檔案上傳到FTP空間，然后配置路徑，埠
我把node檔案放在server檔案夾下面

先安裝，然后添加到首頁，然后就在首頁直接打開就可以了

添加專案，把運行檔案選擇一下，然后提交

然后安裝各種模塊，列入mysql，multiparty等各種模塊，不然要報錯，然后把埠放行，監聽的埠修改一下


然后啟動，沒有問題的話node就部署好了，接下來部署Vue專案
首先按照我之前說的把介面弄好，在main.js中設定一個全域變數，把介面地址和公網IP對應起來，然后加上自己設定的埠就可以了，然后運行npm run build 生成一個dist檔案夾,然后用FTP工具上傳一下就行了，如果在專案部署中遇到什么問題可以留言或者私信我，謝謝！！

最后說一句：下班！！！！