Vue组件代码:
auto-upload属性需要设置成false,否则有些原本的属性或者函数没用上的话会报错!!!(我这种写法比较简便)
class="upload-demo"
ref="upload"
action
:on-change="uploadChange"
:on-remove="handleRemove"
:file-list="fileList"
:limit="1"
:auto-upload="false">
选取文件
上传到服务器
只能上传jpg/png文件,且不超过500kb
js代码部分(接口是axios封装):
import {} form ......;
export default {
data() {
return {
fileList: [],
};
},
methods: {
uploadChange(file, fileList){
this.fileList = fileList;
},
submitUpload() {
let formFile = new FormData();
let file = this.fileList[0].raw;
formFile.append("file", file);
this.getToExcel(formFile);
},
getToExcel(formFile){
importLoseOrder(formFile).then(res=>{
if(res.data.code==200){
this.successMsg('success', res.data.msg);
}else{
this.errorMsg(res.data.msg);
}
}).catch(err=>{
this.errorMsg('服务器错误');
})
},
},
};
//删除触发
handleRemove(file, fileList) {
this.errorMsg('你已成功移除文件:'+file.name+', 剩余文件数量:'+fileList.length);
},