在Vue.js中，如果你使用的是ElementUI的组件库，那么在实现文件上传的功能时，我们可以选择其附带的upload组件来实现，对比我们通过ajax来实现文件上传，使用组件的好处是组件内有封装好的一些响应方法，我们只需要调用即可

<el-upload

style="display: inline"

:show-file-list="false"

:on-success="onSuccess"

:on-error="onError"

:before-upload="beforeUpload"

action="/system/basic/jl/import">

<el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>

</el-upload>

这里列举了常用的几个方法on-success、on-error、before-upload

on-success 和 on-error 分别表示上传成功和失败时候的回调

before-upload 表示上传之前的回调，可以在该方法中，做一些准备工作，例如展示一个进度条给用户或者在上传过程中按钮不可二次点击 。

相应的回调方法：

1. onSuccess(response, file, fileList) {

2. this.enabledUploadBtn = true;

3. this.uploadBtnIcon = 'el-icon-upload2';

4. this.btnText = '数据导入';

5. },

6. onError(err, file, fileList) {

7. this.enabledUploadBtn = true;

8. this.uploadBtnIcon = 'el-icon-upload2';

9. this.btnText = '数据导入';

10. },

11. beforeUpload(file) {

12. this.enabledUploadBtn = false;

13. this.uploadBtnIcon = 'el-icon-loading';

14. this.btnText = '正在导入';

15. }

1. 在文件开始上传时，修改上传按钮为不可点击，同时修改上传按钮的图标和文本。

2. 文件上传成功或者失败时，修改上传按钮的状态为可以点击，同时恢复上传按钮的图标和文本。