el-upload 上传Demo

2021-07-08 10:21:25 浏览数 (2)

代码语言: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'
        });
    }
},

0 人点赞