详细介绍：Vue2 ElementUI Upload组件http-request用法

一、示例代码

选择文件
上传文件
只能上传xls/xlsx文件
export default {
data () {
upload: {
loading: false,
accept: '.xls,.xlsx',
fileList: []
}
},
computed: {
uploadTypeErrorMessage () {
return `只能上传 ${this.upload.accept.split(',')} 格式的文件`;
},
uploadDisabled () {
return this.upload.fileList.length===0;
}
},
methods: {
removeFile () {
let index = this.upload.fileList.findIndex(li =>li.uid===file.uid);
index===-1?'':this.upload.fileList.splice(index, 1);
},
verifyFile (file) {
if(file.status==='ready') {
this.uploadDisabled?this.upload.fileList.push(file):this.upload.fileList.splice(0, 1, file);
if(!['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(file.raw.type)) {
this.$message.error(this.uploadTypeErrorMessage);
this.removeFile(file);
}
}
},
confirmUpload () {
this.$refs.upload.submit();
},
uploadFile (options) {
this.upload.loading = true;
uploadFile({ //自定义接口
file: options.file
}).then(res => {
options.onSuccess(res);
}).catch(error => {
options.onError(error);
}).finally(() => {
this.upload.loading = false;
});
},
uploadSuccess (res) {},
uploadError (error) {
this.$message.error(error);
}
}
}