Vue element自定义多图上传一个key多个文件，自定义上传方法

最新推荐文章于 2025-06-19 15:36:37 发布

胖蛋蛋

最新推荐文章于 2025-06-19 15:36:37 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE之Element UI Vue

本文链接：https://blog.youkuaiyun.com/qq_37805723/article/details/89239911

VUE之Element UI 同时被 2 个专栏收录

3 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文详细介绍如何在VueElement中实现商品图片的多图上传功能，包括预览、上传及错误处理。通过自定义上传方法，确保图片上传的灵活性与用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue element自定义多图上传一个key多个文件

业务功能阐述

图片在没有提交时预览本地的
实现商品新增功能，在点击确定后将数据统一提交给后台
只有上传以后才会生成 htts:yfvdfgh534.jpg这种服务器所存放的地址

在这里插入图片描述

图片在没有提交时预览本地的

 				<el-form-item label="商品图" prop="name">
                    <el-upload
                    action="123"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-change="imgPreview"
                    :on-remove="handleRemove"
                    :auto-upload="false">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="silder_imageVisible">
                        <img width="100%" :src="form.silder_image" alt="">
                    </el-dialog>
                </el-form-item>

action这里随便填写用:auto-upload="false"将其警用掉，使用自定义方法:on-change=“imgPreview”

对应html代码

 				<el-form-item label="商品图" prop="name">
                    <el-upload
                    action="123"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-change="imgPreview"
                    :on-remove="handleRemove"
                    :auto-upload="false">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="silder_imageVisible">
                        <img width="100%" :src="form.silder_image" alt="">
                    </el-dialog>
                </el-form-item>

对应javascript代码

//移除图片
			//this.form.silderimgList上传后的图片文件数组
            handleRemove(file, fileList) {
                console.log('移除图片')
                this.form.silderimgList=[]
                for(let i=0;i<fileList.length;i++){
                    let str=""
                    str = fileList[i].url
                    this.form.silderimgList.push(str)
                }
                console.log(this.form.silderimgList);
                console.log('移除图片')
            },
            //点击放大图片
            handlePictureCardPreview(file) {
                this.form.silder_image = file.url;
                //console.log(file.url)
                this.silder_imageVisible = true;
            },
            //图片上传事件
            imgPreview (file, fileList) {
                let fileName = file.name;
                let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.form.silder_image = file.url;
                } else {
                    this.$message.error('请选择图片文件');
                }
                console.log('图片上传事件')
                this.form.silderimgList=[]
                for(let i=0;i<fileList.length;i++){
                    let obj={}
                    obj = fileList[i].raw
                    this.form.silderimgList.push(obj)
                }
                this.form.name = fileList[0].raw
                console.log(file,fileList);
                console.log(this.form.silderimgList);
                console.log('图片上传事件')
            },

实现商品新增功能，在点击确定后将数据统一提交给后台
错误示例

			getimg(){
               	let that = this 
               	//打印已包装好的文件格式数组
                console.log(that.form.silderimgList)
                let formData = new FormData();
                //that.form.silderimgList值本地预览的图片数组
                formData.append('files', that.form.silderimgList);
                //商品名
                formData.append('goodsName', that.form.silderimgList);
                //打印文件格式数组
                console.log(formData.get('files'))
                //上传服务器的api
                that.$axios({
                    method: "post",//指定请求方式
                    url: "请求地址你们自己写",//请求接口
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;'
                    },
                    data:formData
                }).then(function(res){
                    javascriptconsole.log('成功')
                    if(res.data.code === 0){
                        that.$message({
                            message: '成功',
                            type: 'success',
                            duration: 1500
                        })
                    }else{
                        that.$message.error(res.data.message);
                    }
                })
            }

当执行上面方法你会发现（包装好的文件数组和通过append放入formData()对象中的不一样）
例如打印包装好的没有问题
打印通过append放入formData()对象中
向服务器发送的请求
正确示例

			getimg(){
                let that = this 
                let formData = new FormData();
                //that.form.silderimgList值本地预览的图片数组
                for(let i=0;i<this.form.silderimgList.length;i++){
                    formData.append('files', that.form.silderimgList[i]);
                }
                //商品名
                formData.append('goodsName', that.form.silderimgList);
                //打印文件格式数组
                console.log(formData.get('files'))
                //上传服务器的api
                that.$axios({
                    method: "post",//指定请求方式
                    url: "http://byd.isoft.mobi/api/login_filesGo",//请求接口
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;'
                    },
                    data:formData
                }).then(function(res){
                    console.log('成功')
                    if(res.data.code === 0){
                        that.$message({
                            message: '成功',
                            type: 'success',
                            duration: 1500
                        })
                    }else{
                        that.$message.error(res.data.message);
                    }
                })
            }