美文网首页
ant-design-vue 上传pdf文件

ant-design-vue 上传pdf文件

作者: 哼_ | 来源:发表于2022-05-24 10:03 被阅读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);
    
                        }
                    })
            },
    

    相关文章

      网友评论

          本文标题:ant-design-vue 上传pdf文件

          本文链接:https://www.haomeiwen.com/subject/aqljprtx.html