用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, 
      }
    }
}