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