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);
                    }
                })
            }

• 例如打印包裝好的沒有問題
  
• 向服務器發送的