上传-先选择文件再上传文件

html:

<a-form-item
     ref="nameFileList"
     label="文件上传"
     name="nameFileList"
   >
     <a-upload
       v-model:file-list="submitForm.nameFileList"
       name="file"
       :show-upload-list="false"
       :customRequest="selfUpload"
       :before-upload="beforeUpload"
       @change="handleChange"
     >
       <div style="display: flex">
         <div>
           <a-button>
             <upload-outlined></upload-outlined>上传文件
           </a-button>
         </div>
       </div>
     </a-upload>
     <a-button
       type="primary"
       style="margin-left: 10px"
       @click="submitFile"
       :disabled="!submitForm.disabledName"
       >开始上传</a-button
     >
   </a-form-item>
   <div v-if="submitForm.urlId">{{ searchForm.maintenanceNames }}</div>
 </a-form>

JS:

const handleChange = info => {
    console.log(info)
    searchForm.maintenanceNames = info.file.name
};
const beforeUpload = file => {
    console.log(file)
    console.log(file.name)

    previewType.value = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? "1" : "2"
    // const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'application/pdf';
    console.log(file.name.match(/\.([^\.]+)$/)[1]) //截取最后一个小数点后面的字符
    const isJpgOrPng = file.name.match(/\.([^\.]+)$/)[1] === 'doc' || file.name.match(/\.([^\.]+)$/)[1] === 'docx' || file.name.match(/\.([^\.]+)$/)[1] === 'pdf';
    if (!isJpgOrPng) {
        message.error('只能上传doc,docx格式的文件或PDF文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 10;
    if (!isLt2M) {
        message.error('文件大小不能超过10MB!');
    }
    submitForm.disabledName = isJpgOrPng && isLt2M ? file.name : ''
    return isJpgOrPng && isLt2M;

};
let previewType = ref("")
let fileObj = ref({
    formData: {},
    file: {}
})
const submitFile = () => {
    spinning.value = true
    post(API.uploader.upLoaderFile, {
            data: fileObj.formData,
            params: {
                locationType: 'OSS'
            }
        })
        .then((res) => {
            spinning.value = false
            submitForm.urlId = res.data
            AddUploadFile()

        })
        .catch((res) => {
            spinning.value = false
            message.error(res);
        });
}
let name = ref("")
const selfUpload = ({
    action,
    file,
    onSuccess,
    onError,
    onProgress
}) => {
    const formData = new FormData()
    let that = this
    formData.append('file', file)
    console.log(formData, 'formData')
    fileObj.formData = formData
    fileObj.file = file
    name = file.name
    message.success("选择成功，待上传");
}
//文件上传调接口
const AddUploadFile = () => {
    post(API.ability.AddUploadFile, {
            params: {
                projectEvaluationId: listId.value, //外面list的id
                fileId: submitForm.urlId, //文件id
                name: name, //上传文件名称
                fileType: "SUMMARIZES", //业务类型(REFERENCE:量化评估项目实施安排附件,ASSESSMENT_REFERENCE:评估参考文献,SUMMARIZES:总结规定文件)
                evaluationWayType: resourceMenuType.value === 'ASSESSMENT_LEADER_REVIEW_PROJECT' || resourceMenuType.value === 'ASSESSMENT_LEADER_PASS_PROJECT' ? 'SELF_ASSESSMENT' : resourceMenuType.value === 'EXPERT_LEADER_REVIEW_PROJECT' || resourceMenuType.value === 'EXPERT_LEADER_PASS_PROJECT' ? 'EXPERT_ASSESSMENT' : '', //评估总结文档类型(SELF_ASSESSMENT:自评估总结文档,EXPERT_ASSESSMENT:专家评估总结文档)
                // projectAppraisalTargetId: expandform.selectId, //树状一级id
                // projectAppraisalTargetName: expandform.selectName, //树状一级名称

            }
        })
        .then(() => {
            message.success("上传成功");
            submitForm.disabledName = ""
            searchForm.maintenanceNames = ""
            // console.log(res.data,'########################################')
            selectUploadFileDtoReport()
        })
        .catch((res) => {
            message.error(res);
        });
}