Vue上传文件及图片的写法。

最新推荐文章于 2025-05-19 10:57:36 发布

原创最新推荐文章于 2025-05-19 10:57:36 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Element UI的上传控件，包括上传前的文件格式验证（只支持xls和xlsx），图片验证，以及上传成功后的提示消息。着重于前后端配合实现Excel文件上传功能。

1、使用element ui 上传控件（使用以下代码，主动删除错误注释）

 <el-upload action="/ordersetting/upload"    //提交后台地址
     name="excelFile"
     :show-file-list="false"
     :on-success="handleSuccess"   //上传成功后执行方法
     :before-upload="beforeUpload">  //上传前执行方法
 <el-button type="primary">上传文件</el-button>
 </el-upload>

2、上传前验证文件格式的执行方法

（1）Excel校验

//上传之前进行文件格式校验
beforeUpload(file){
   const isXLS = file.type === 'application/vnd.ms-excel';
   if(isXLS){
       return true;
   }
   const isXLSX = file.type === 'application/vnd.openxmlformats- 
   officedocument.spreadsheetml.sheet';
   if (isXLSX) {
       return true;
   }
   this.$message.error('上传文件只能是xls或者xlsx格式!');
       return false;
   }

（2）图片的校验

//上传图片之前执行
beforeAvatarUpload(file) {
	const isJPG = file.type === 'image/jpeg';
	const isLt2M = file.size / 1024 / 1024 < 2;
	if (!isJPG) {
		this.$message.error('上传图片只能是 JPG 格式!');
	}
	if (!isLt2M) {
		this.$message.error('上传图片大小不能超过 2MB!');
	}
		return isJPG && isLt2M;
}

3、上传后提示方法

//上传成功
handleSuccess(response, file) {
    if(response.flag){
        this.$message({
            message: response.message,
            type: 'success'
         });
     }else{
         this.$message.error(response.message);
     }
}