vue + ant 文件上传

HTML

<a-upload
	   v-model:file-list="submitForm.nameFileList"
	   name="file"
	   :show-upload-list="false"
	   :customRequest="selfUpload"
	   :before-upload="beforeUpload"
	   @change="handleChange"
	   v-if="submitDialogText !== '3'"
>
		<div style="display: flex">
		  <a-tooltip
		    placement="topLeft"
		    title="支持格式：.doc .docx .pdf ，单个文件不能超过10M"
		  >
		    <div>
		      <a-button :loading="loading">
		        <upload-outlined></upload-outlined>文件上传
		      </a-button>
		    </div>
		  </a-tooltip>
		</div>
		<div>{
    
    {
    
     submitForm.maintenanceNames }}</div>
</a-upload>

JS

import {
    
    
    modal,
    message,
    upload,
} from "ant-design-vue";
import {
    
    
    ExclamationCircleOutlined,
    FileTextOutlined,
    UploadOutlined,
} from '@ant-design/icons-vue';
import {
    
    
    API
} from "../../../../../../../../api/index";
import {
    
    
    post
} from "../../../../../../../../api/http";

components: {
    
    
     AUpload: upload,//上传组件
     //图标
     UploadOutlined,
     UploadBigFile,
}

// 上传文件
let loading = ref(false)
const handleChange = info => {
    
    
    console.log(info)
    console.log(info.file.originFileObj)
    console.log(info.file.name)
    submitForm.maintenanceNames = info.file.name
    if (info.file.status === 'uploading') {
    
    
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
    
    
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, base64Url => {
    
    
            submitForm.maintenanceUrl = base64Url;
            loading.value = false;
        });
    }
    if (info.file.status === 'error') {
    
    
        loading.value = false;
        message.error('上传失败!');
    }
};
const beforeUpload = file => {
    
    
    console.log(file)
    previewType.value = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? "1" : "2"
    console.log(file.name.match(/\.([^\.]+)$/)[1]) //截取最后一个小数点后面的字符
    const isJpgOrPng = file.name.match(/\.([^\.]+)$/)[1] === 'doc' || file.name.match(/\.([^\.]+)$/)[1] === 'docx' || file.name.match(/\.([^\.]+)$/)[1] === 'pdf';
    // const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'application/pdf';
    if (!isJpgOrPng) {
    
    
        message.error('只能上传doc,docx格式的文件或PDF文件!');
        return false
    }
    const isLt2M = file.size / 1024 / 1024 < 10;
    if (!isLt2M) {
    
    
        message.error('文件大小不能超过10MB!');
    }
    return isJpgOrPng && isLt2M;
};
let previewType = ref("")
const selfUpload = ({
    
    
    action,
    file,
    onSuccess,
    onError,
    onProgress
}) => {
    
    

    // submitForm.maintenanceNames = ''
    // submitForm.maintenanceUrl = ''
    // submitForm.urlId = ''
    const formData = new FormData()
    let that = this
    formData.append('file', file)
    console.log(file, "^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^")
    console.log(formData, 'formData')
    loading.value = true
    post(API.uploader.upLoaderFile, {
    
    
            data: formData,
            params: {
    
    
                locationType: 'OSS'
            }
        })
        .then((res) => {
    
    
            console.log(res.data)
            submitForm.urlId = res.data
            submitForm.maintenanceNames = file.name
            submitForm.maintenanceUrl = `${API.reviewFile.pdfUrl}${res.data}`
            console.log(submitForm.maintenanceUrl, '2222222222222222')
            message.success("上传成功");
            loading.value = false
            ruleForms.value
                .validate('maintenanceNames')

        })
        .catch((res) => {
    
    
            message.error(res);
            loading.value = false
        });
}

 return {
    
    
    loading,
    handleChange,
    beforeUpload,
    previewType,
    selfUpload,
 }