<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :auto-upload="false"
  list-type="picture">
  <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
    }
  }
</script>

<!-- 文件上傳-->
<el-form :rules="rules" :model="dataForm" ref="dataForm" label-width="150px" @submit.native.prevent>
      <el-form-item label="名稱：" prop="name">
        <el-input type="text" v-model.trim="dataForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="文件：" prop="file" >
        <el-upload
            class="upload-import"
            ref="uploadImport"
            :http-request="httpRequest"
            action=""
            :on-remove="handleRemove"
            :file-list="fileList"
            :limit="1" <!-- 限制上傳數(shù)量-->
            :on-change="handleChange"
            :auto-upload="false"	<!-- 關(guān)閉自動上傳-->
            accept="application/zip,.zip">  <!-- 設(shè)置接收的文件類型-->
          <el-button v-show="!hasFile" slot="trigger" size="small" type="primary" >選取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上傳zip文件，且不超過10M</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="submitUpload">提交</el-button>
         <el-button @click="resetForm('ruleForm')">重置</el-button>
         <el-button @click="dialogFormVisible = false">取 消</el-button>
      </el-form-item>
 </el-form>

<script>
export default {
	data(){
		return {
			dataForm: {
	          name: '',
	          file: null
	        },
	        rules: {
	          name: [
	            {required: true, message: "請輸入名稱", trigger: "blur"},
	            {max: 50, message: "最長可輸入50個字符", trigger: "blur"},
	            {validator: isvalidatName, trigger: "blur" },
	          ],
	          file: [
	            {required: true, message: "請選擇上傳文件", trigger: "blur"},
	          ]
        },
        hasFile: false,
        fileList: []
	},
	methods: {
		 handleRemove(file, fileList) {
	        if (!fileList.length) {
	          this.hasFile = false;
	        }
	        this.dataForm.file = null;
	      },
	      handleChange(file, fileList) {
    	    if (fileList.length >= 2) {
	          return;
	        }
	        if (fileList.length === 1) {
	          this.hasFile = true;
	        }
	        this.dataForm.file = file;
	      },
	      //確定按鈕
	      //調(diào)用組件upload的submit方法，從而觸發(fā)httpRequest方法，實現(xiàn)手動上傳
	      submitUpload() {
	      	this.$refs.dataForm.validate(valid => {
	      		if(vaild){
	      			this.$refs.uploadImport.submit();
	      		}
			})
    	  },
    	  httpRequest(param) {
	    	  let fd = new FormData();
		      fd.append('file', param.file); // 傳文件
		      fd.append('name',  dataForm.name); 
		      //dataPar.file.raw
		      axios.post('/interface/importProject', fd , {
				headers: {'Content-Type': 'multipart/form-data'},//定義內(nèi)容格式,很重要
				timeout: 20000,
			  }).then(response => {
				console.log(res)
			    //接口成功調(diào)用params上的onSuccess函數(shù)，會觸發(fā)默認的successHandler函數(shù)
          		//這樣可以用自帶的ui等
          		///params.onSuccess({name: 'eric'})
			    }).catch(err =>{})						
		      }
			})
   		 }
	}
}
</script>

<el-dialog title="添加歌曲" :visible.sync="dialogFormVisible">
   <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="曲名" prop="name">
       <el-input v-model="ruleForm.name"></el-input>
     </el-form-item>
     <el-form-item label="專輯" prop="introduction">
       <el-input  v-model="ruleForm.introduction"></el-input>
     </el-form-item>
     <el-form-item label="歌詞" prop="lyric">
       <el-input type="textarea" v-model="ruleForm.lyric"></el-input>
     </el-form-item>
     <el-form-item label="歌曲文件" prop="introduction">
       <el-upload
		   ref="upload"
		   :action="url" 
		   :limit="2"
		   multiple
		   :with-credentials="true"
		   :on-success="upFile"
		   :on-remove="handleRemove"
		   :on-exceed="handleExceed"
		   :data="upData"
		   :auto-upload="false"
		   accept=".KEY, .CRT">
		   <img src="/static/images/web/upload.png" alt>
		    <span>選擇上傳文件</span>
		   <div slot="tip" class="el-upload__tip">只能上傳.key/.crt文件，且只能上傳兩個</div>
		 </el-upload>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitUpload">提交</el-button>
       <el-button @click="resetForm('ruleForm')">重置</el-button>
       <el-button @click="dialogFormVisible = false">取 消</el-button>
     </el-form-item>
   </el-form>
</el-dialog>

data() {
    return {
      url: service.defaults.baseURL + "aaa/bbb", // 這里寫上傳文件的地址
      form: {
        name: "",
        introduction: "",
        lyric: "",
      }
    };
  },
computed: {
   // 這里定義上傳文件時攜帶的參數(shù)，即表單數(shù)據(jù)
    upData: function() {
      return {
        body: JSON.stringify(this.form)
      }
    }
  },
methods: {
  add(form) {
    this.$refs[form].validate(async valid => {
      if (valid) {
      // 表單驗證通過后使用組件自帶的方法觸發(fā)上傳事件
        this.$refs.upload.submit()
      } else {
        return false;
      }
    });
},
  // 成功上傳文件
  upFile(res, file) {
    if (res.status == 200) {
      // 文件上傳成功后的回調(diào)，比如一些提示信息或者頁面跳轉(zhuǎn)都寫在這里
      this.$message.success(res.info);
    } else {
      this.$message.warning(res.info);
      let _this = this;
      setTimeout(function() {
        _this.$refs.upload.clearFiles();
      }, 1000);
    }
  },
 // 上傳文件超出個數(shù)
  handleExceed(files, fileList) {
    this.$message.warning(`當前只能選擇上傳2 個證書`);
  },
 //  移除文件
 handleRemove(res, file, fileList) {
   this.$message.warning(`移除當前${res.name}證書，請重新選擇證書上傳！`);
 }
}

<el-upload
  :action="uploadURL">
</el-upload>
<script>
  export default {
    data() {
      return {
        uploadURL: '',
      };
    },
    computed: {
	    uploadURL() {
	      if(process.env.NODE_ENV === 'production'){
	        return '/api/uploadFile'
	      }
	      return '/dev-api/api/uploadFile'
	    }
  	}
  }
</script>

 proxy: {
    [REQUEST_PRE]: {
       target: 'http://localhost:88',
       changeOrigin: true,
       secure: false,
       pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''
       }
    },    
 }

const REQUEST_PRE = "/api"
module.exports = {
	// 其他配置省略
	
	// 本地代理配置
	devServer: {
		// 默認是false，可以將http://localhost:8080 變?yōu)?https://localhost:8080
        https: true,
        // 代理配置
        proxy: {
        	// 簡單寫法
        	"/normal":{
        		target: 'http://localhost:80',
        		ws: true,  // 允許websocket代理
                changeOrigin: true //允許跨域
        	},
        	
        	// 變量寫法
            [REQUEST_PRE]: {
                target: 'http://localhost:88',
                ws: true,
                changeOrigin: true
            },
            
            // 重寫，當訪問http://localhost:80/req/getData
            // 實際上訪問的是 http://localhost:8888/module/getData
            '/req': {
                target: 'http://localhost:8888',
                pathRewrite: path => path.replace('/req', '/module'),//replace方法返回一個替換好的新的字符串
                ws: true,
                changeOrigin: true
            },
        },
        open: true
    }
}

'/api': 'http://localhost:8888',
'/api/other': 'http://localhost:88'

'/api/other': 'http://localhost:88',
'/api': 'http://localhost:8888'

const REQUEST_PRE = '/api'
axios.get({
	url: `${REQUEST_PRE}/getData`
}).then(res=>{
	console.log(res)
})

// 重寫路徑
pathRewrite: { '^/old/api' : '/new/api' }

// 刪除路徑
pathRewrite: { '^/remove/api' : '' }

// 添加基本路徑
pathRewrite: { '^/' : '/basepath/' }

// 自定義重寫
pathRewrite: function  ( path ,  req )  {  return  path . 替換（'/api' ， '/base/api' ） }

// 自定義重寫，返回 Promise 
pathRewrite: async  function  ( path ,  req )  { 
  const  should_add_something  =  await  httpRequestToDecideSomething ( path ) ; 
  if  ( should_add_something )  path  +=  "something" ; 
  返回 路徑；
}

mode: development --> process.env.NODE_ENV = development
mode: production --> process.env.NODE_ENV = production