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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;
		},

如果帮到兄弟们 还望三连走一走,抱拳了各位老铁!