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