ant-design-vue 上传pdf文件

2022-05-24  本文已影响0人  哼_

html模板

<a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="文档上传"
        >
          <a-button class="uploadBtn">
            <a-icon type="upload" /> 上传
            <input
              type="file"  // 文件类型
              name="file"
              id="uploadBtn"
              accept="application/pdf"  // 上传pdf文件
              size="10"  // 文件不能超过10M
              @change="upfileClick" // 上传事件
            />
          </a-button>
        </a-form-item>

js事件

upfileClick(e) {
            /*
                accept="*" //所有文件格式都合法
                accept="images/*" //所有格式图片都合法
                accept="images/png" //png格式图片都合法
                accept="images/png, application/pdf" //png格式图片和pdf文件都合法
                size="20" //文件大小不能超过20MB,默认不能超过10MB
            */
            const e_file = e.target; 
            const file = e_file.files[0];
            let accept_s = (e_file.getAttribute("accept") || "*").replace(/\s*/g,"").split(","); // 获取input标签允许上传的文件类型
            let size = parseFloat(e_file.getAttribute("size") || 10);
            let maxSize = parseFloat((size * 1024 * 1024).toFixed(2));
            let [fileType, fileSuffix] = file.type.split("/");
            let isVerifiedStatus = 0;
            let isVerifiedMsg  = {
                "0":"未验证",
                "1":"验证通过",
                "2":`上传文件大小不能超过${size}MB`,
                "3":"请上传PDF格式文件",
            };
            if(file.size <= maxSize){
                for(let i=0,accept; accept=accept_s[i++];){
                    let [acceptType, acceptSuffix="*"] = accept.split("/");
                    if(accept == "*"){
                        isVerifiedStatus = 1;
                        break;
                    }else if(fileType == acceptType){
                        if(acceptSuffix == "*" || fileSuffix == acceptSuffix){
                            isVerifiedStatus = 1;
                            break;
                        }else{
                            isVerifiedStatus = 3;
                        }
                    }else{
                        isVerifiedStatus = 3;
                    }
                }
            }else{
                isVerifiedStatus = 2;
            }
            if(isVerifiedStatus != 1){
                this.$message.error(isVerifiedMsg[isVerifiedStatus]);
                $('#uploadBtn').val('');
            }else{
                let param = new FormData();
                param.append('file', file);
                console.log(param);
                this.fileUploadCusDocs(param, this); // 调接口
            }
        },
fileUploadCusDocs(data) {
            axios.post('接口链接', data)
                .then(res => {
                    this.fileList = [];
                    if (res.code * 1 == 200) { // 判断是因为axios封装没有拦截状态码
                        this.fileList.push({
                            fileName: res.result.fileName,
                            filePath: res.result.filePath
                        });

                        $('#uploadBtn').val('');
                    } else {
                        this.$message.info(res.message);

                    }
                })
        },
上一篇下一篇

猜你喜欢

热点阅读