vue实现上传文件[通俗易懂]

全栈程序员站长

发布于 2022-09-22 21:44:17

1.3K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

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.cn/170637.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java