大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
vue实现上传文件
前言:
上一文咱们说到下载文件,这次给大家讲解一下上传文件,都是后台功能不可缺少的一部分. 那么好,多了不说,少了不唠,咱们直接上代码.
1.封装好接口文件
export function uploadData(query: any, data: any) {
return service({
url: '/compliance/filecheck/fileAnalysis',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
params: query,
data
})
}
2.页面文件
1.1 切记引入我们封装好的接口
<el-upload
class="upload_btn"
ref="upload"
action="string"
accept=".docx,.doc,.pdf"
:limit="1"
:show-file-list="true"
:http-request="httpRequest"
:file-list="fileList"
:auto-upload="true"
:before-upload="beforeExcelUpload"
>
<el-button slot="trigger" size="small" type="primary" @click="submitUpload">选取文件</el-button>
</el-upload>
3.给兄弟们直接上逻辑
// 上传文件之前的钩子,上传前对文件的大小和类型进行判断
uploadData(file) {
// 打印file，帮助我们了解我们需要的参数
console.log(file);
const isExcel = file.name.split('.')[1] === 'docx' || file.name.split('.')[1] === 'doc' || file.name.split('.')[1] === 'pdf';
const isSize = file.size / 5024 / 5024 < 1;
if (!isExcel) {
this.$message({
message: '只能上传doc或docx文件或pdf!',
type: 'error',
});
}
if (!isSize) {
this.$message({
message: '上传文件大小不能超过 5MB!',
type: 'error',
});
}
return isExcel && isSize;
},
如果帮到兄弟们 还望三连走一走,抱拳了各位老铁!
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170637.html原文链接：https://javaforall.net
