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

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

业务功能阐述

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

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

3. 只有上传以后才会生成 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);
                    }
                })
            }

• 例如打印包装好的没有问题
  
• 向服务器发送的