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' ) {
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' ;
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
} ) = > {
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,
}