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

<template>
    <el-upload  class="upload-demo"  multiple :limit="fileInfo.limit" ref="upload"
                action="string" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="attList"
                :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>-->
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
</template>
<script>
    export default {
        props: ['fileInfo', 'fileList'],
        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
                    }
                }
                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);
                }
                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)
                        _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++) {
                console.info("--created--"+this.fileList[i]);
                this.attList.push({
                    id: this.fileList[i].id,
                    fileName: this.fileList[i].fileName,
                    name: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() {
                console.info('watch.fileList->'+JSON.stringify(this.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,
                        name:this.fileList[i].fileName,
                        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>