spfm-market-front/src/components/upload.vue

<template>
    <div v-loading="loading">
        <el-upload class="upload-demo" :drag="fileInfo.type !== 'btn'" multiple :limit="fileInfo.limit" ref="upload"
            action="string" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="fileList"
             :auto-upload="true" :show-file-list="fileInfo.type !== 'btn'"
            :before-upload="deforeUp" :http-request="signUpload">
            <div v-if="fileInfo.type !== 'btn'">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击上传</div>
            </div>
            <div v-if="fileInfo.type === 'btn'">
                <el-button :size="fileInfo.size?fileInfo.size:'medium'" :type="fileInfo.btntype">{{fileInfo.typename}}</el-button>
            </div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        props: ['fileInfo', 'fileList','type'],
        data() {
            return {
                fileLists: [],
                attList: [],
                loading: false,
                num: 0,
                s: false
            }
        },
        methods: {
            signUpload(){},
            //删除
            handleRemove(file) {
                for (let i = 0; i < this.attList.length; i++) {
                    if (this.attList[i].fileName === file.name) {
                        this.attList.splice(i, 1);
                        this.$emit('uploadBack', this.attList)
                    }
                }
            },
            //数量限制
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 ${this.fileInfo.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
                );
            },
            deforeUp(file) {
                const isLt2M = file.size / 1024 / 1024 < 100;
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 20MB!');
                    return false
                }
                if(this.fileInfo.type == 'img'){
                    const isImg = file.type.split("/")[0] == 'image';
                    if (!isImg) {
                        this.$message.error('请上传图片格式文件!');
                        return false
                    }
                }
                if(this.fileInfo.typexz == 'ppt'){
                    const isImg = file.name.split(".")[1] == 'pptx';
                    console.log(file.name.split(".")[1] == 'pptx')
                    if (!isImg) {
                        this.$message.error('请上传ppt格式文件!');
                        return false
                    }
                }
                if(this.fileInfo.typexz == 'csv'){
                    const isImg = file.name.split(".")[1] == 'csv';
                    if (!isImg) {
                        this.$message.error('请上传csv格式文件!');
                        return false
                    }
                }
                if(this.fileInfo.typexz == 'xlsx'){
                    const isImg = file.name.split(".")[1] == 'xlsx';
                    if (!isImg) {
                        this.$message.error('请上传xlsx格式文件!');
                        return false
                    }
                }
                this.loading = true;
                let query = new FormData();
                query.append("file", file);
                if(this.fileInfo.typename == '新增素材'){
                    query.append("advType", this.fileInfo.advType);
                    query.append("advTypeName", this.fileInfo.advTypeName);
                }
                if(this.fileInfo.url == '/market/cIllegalCallTask/importTempByProv'||this.fileInfo.url == '/market/cChannelInfo/cIllegalCallTask/importTempByProv'){
                    query.append("taskId", this.fileInfo.taskId);
                    query.append("tempId", this.fileInfo.tempId);
                }
                //违规外呼
                if(this.fileInfo.uploadType == 'outCall'){
                    query.append("uploadType", 'outCall');
                    query.append("relId", this.fileInfo.relId);
                }
                if(this.fileInfo.uploadType == 'train'){
                    query.append("uploadType", 'train');
                    query.append("relId", this.fileInfo.relId);
                }
                //运营类项目考核及结算
                if(this.fileInfo.url == '/market/cmkAttachInfo/upload'){
                    query.append("uploadType", this.fileInfo.uploadType);
                }
                if(this.fileInfo.url == '/market/cStoreOutWo/importData'){
                    query.append("woNo", this.fileInfo.woNo);
                }
                if(this.fileInfo.url == '/market/cStoreScheTrainEva/importDataEva'){
                    query.append("evaId", this.fileInfo.evaId);
                }
                this.num++;
                let _this = this;
                this.$http({
                    url: this.fileInfo.url,
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: query,
                }).then((res) => {
                    if (this.fileInfo.type === 'btn') {
                        this.$refs['upload'].clearFiles();
                        this.$emit('uploadBack',res)
                        if(res.data.result==0){
                            this.$emit('onSuccess',file)
                            _this.$message({
                                message: res.data.desc,
                                type: 'success'
                            });
                        }else if(res.data.result==1){
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        }else if(res.data.result==2){
                            _this.$message({
                                message: res.data.desc,
                                type: 'warning'
                            });
                        }else if(res.data.result==3){
                            _this.$message({
                                message: res.data.desc,
                                type: 'info'
                            });
                        }else{
                            _this.$message({
                                message: res.data.desc,
                                type: 'success'
                            });
                        }
                        this.num--;
                        if (this.num == 0) {
                            this.loading = false;
                        }
                        return
                    }
                    if (this.fileInfo.type === 'voice') {
                        this.attList = res.data;
                    } else {
                        this.attList.push({
                            id: res.data.body.id,
                            fileName: res.data.body.fileName,
                            fileCode: res.data.body.fileCode,
                            opName: res.data.body.opName,
                            opNo: res.data.body.opNo,
                            opTime: res.data.body.opTime,
                            attchFileId: res.data.body.attchFileId,
                            type: res.data.body.type,
                        });
                    }
                    this.$emit('uploadBack', this.attList);
                    this.num--;
                    if (this.num == 0) {
                        this.loading = false;
                    }
                    return true
                }).catch((res) => {
                    this.$message({
                        message: file.name+'上传失败',
                        type: 'error'
                    });
                    this.num--;
                    if (this.num == 0) {
                        this.loading = false;
                    }
                    for (let i = 0; i < this.$refs['upload'].uploadFiles.length; i++) {
                        if(file.name == this.$refs['upload'].uploadFiles[i].name){
                            this.$refs['upload'].uploadFiles.splice(i,1)
                        }
                    }
                    return false
                })
            },
        },
        mounted() {

        },
        created() {
            this.attList = [];
            for (let i = 0; i < this.fileList.length; i++) {
                this.attList.push({
                    id: this.fileList[i].id,
                    fileName: this.fileList[i].fileName,
                    fileCode: this.fileList[i].fileCode,
                    opName: this.fileList[i].opName,
                    opNo: this.fileList[i].opNo,
                    opTime: this.fileList[i].opTime,
                    attchFileId: this.fileList[i].attchFileId,
                    type: this.fileList[i].type,
                })
            }
        },
        watch: {
            fileList() {
                this.attList = [];
                for (let i = 0; i < this.fileList.length; i++) {
                    this.attList.push({
                        id: this.fileList[i].id,
                        fileName: this.fileList[i].fileName,
                        fileCode: this.fileList[i].fileCode,
                        opName: this.fileList[i].opName,
                        opNo: this.fileList[i].opNo,
                        opTime: this.fileList[i].opTime,
                        attchFileId: this.fileList[i].attchFileId,
                        type: this.fileList[i].type,
                    })
                }
            }
        }
    }
</script>
<style scoped lang="scss">

</style>