用vue實現文件上傳

使用Upload組件實現文件上傳，如果要使用upload，需要引入ElementUI,所以一般建議，如果使用了ElementUI做UI控件的話，則可以考慮使用Upload組件來實現文件上傳。

<el-upload
  style="display:inline"
  :show-file-list="false"
  :on-success="onSuccess"
  :on-error="onError"
  :before-upload="beforeUpload"
  :action="/system/basicimport">
  <el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>

相關參數的含義：

1. on-success 文件上傳成功時的鉤子

2. on-error 文件上傳失敗時的鉤子

3. before-upload 上傳文件之前的鉤子，參數爲上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。

4. action  調用的是後臺上傳的接口。

onSuccess(response,file,fileList){
   this.enabledUploadBtn=true;
   this.uploadBtnIcon='el-icon-upload2';
   this.btnText ='上傳';
}
onError(err,file,fileList){
   this.enabledUploadBtn = true;
   this.uploadBtnIcon='el-icon-upload2'
   this.btnText='上傳';
}
beforeUpload(file){
   this.enabledUploadBtn=false;
   this.uploadBtnIcon ='el-icon-loading';
   this.btnText='正在上傳';
}

1. 文件開始上傳時按鈕置灰（不可點擊），同時可以更改上傳按鈕的圖標和文本。

2. 文件上傳成功後，按鈕可以點擊。同時對上傳按鈕的圖標和文本進行了更改。

注：記得要在data中對enabledUploadBtn賦值。如果沒有對enabledUploadBtn定義則無法實按鈕的置灰功能。

 export default {
    data() {
      return {
        enabledUploadBtn:false, 
      }
    }
}