代码语言：javascript复制
<el-upload
class="upload-demo"
ref="upload"
:on-change="handleUploadChange"
:on-success="handleImportSuccess"
:before-upload="beforeImportUpload"
:http-request="uploadZip"
:file-list="fileList"
:on-remove="handleUploadRemove"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过50M</div>
</el-upload>业务逻辑
代码语言：javascript复制handleUploadChange(file, fileList){
this.fileList = fileList.slice(-1);
console.log(this.fileList);
},
handleUploadRemove(file, fileList){
console.log(file,fileList);
this.fileList = [];
},
submitUpload() {
if(!this.selectedBrand.id && !this.carGroup.id){
this.$message.warning('请先选择品牌或者车组');
return false;
}
if(this.selectedBrand.id){
this.formUpLoad.brandId = this.selectedBrand.id;
this.formUpLoad.brandCode = this.selectedBrand.ppbm;
}
if(this.carGroup.id){
this.formUpLoad.brandId = this.carGroup.ppid;
this.formUpLoad.brandCode = this.carGroup.ppbm;
this.formUpLoad.groupId = this.carGroup.id;
}else{
this.formUpLoad.groupId = '';
}
if(this.selectedProvince.csbm){
this.formUpLoad.provinceCode = this.selectedProvince.csbm;
}else{
this.$message.warning('请先选择省份');
return false;
}
if(this.formUpLoad.priceType == ''){
this.$message.warning('请先选择覆盖类型');
return false;
}
if(this.fileList.length == 0){
this.$message.warning('请先选择上传文件');
}
this.$refs.upload.submit();
},
uploadZip(params){
console.log(params)
const formData = new FormData();
formData.append('file', params.file);
console.log(formData)
axios.post(`../marketFileInfo/upload?brandId=${this.formUpLoad.brandId}&brandCode=${this.formUpLoad.brandCode}&groupId=${this.formUpLoad.groupId}&provinceCode=${this.formUpLoad.provinceCode}&priceType=${this.formUpLoad.priceType}`,formData, { headers: { 'Content-Type': 'multipart/form-data' }}).then(data => {
console.log('data', data)
if (data.status == '200') {
this.$message.success('上传成功');
this.$refs.upload.clearFiles();
this.getUploadList();
}else{
this.$message.error(data.message);
}
}).catch(error => {
console.log(error);
})
},
handleImportSuccess(res, file){
console.log('handleImportSuccess',res)
if (res.status == '200') {
this.$message.success('文件上传成功');
this.paging.page = '1';
this.getUploadList();
}else{
this.$message.error(res.message);
}
},
beforeImportUpload(file) {
console.log(file)
let picType = (file.type).split('/')[1];
console.log(picType);
if (picType != 'x-zip-compressed' && picType != 'zip') {
this.$message({
message: '上传文件只允许zip格式!',
type: 'warning'
});
return false
}
console.log(file.type);
const isLt5M = file.size / 1024 / 1024 < 50;
if (!isLt5M) {
this.$message({
message: '上传文件大小不能超过 50MB!',
type: 'warning'
});
}
},
