Vue 多组多图上传

需求：从后台获取到一组数量不固定的库存条码，给每个条码关联对应的设备图片（多张）、设备序列号，再回传给后台。

实现：
1.获取库存条码

从后台获取到的是一个包含库存条码的字符串数组，获取到数据以后新建一个对象数组，把库存条码放进去，同时新增两个字段用来存放图片数组和设备序列号。

getStoreNumber(row) { // 获取库存条码
            var params = {}
            var that = this
            params.ownerIntentionId = row.id // 库存ID
            var loginInit = that.loadingInit('.addInventory')
            getInventorySerialNo(params).then(res => {
                loginInit.close()
                that.dialogUpload.id = row.id
                that.dialogUpload.items = []
                that.uploadItems = res.items
                that.uploadItems.forEach((item, index) => {
                    that.dialogUpload.items.push({
                        inventorySerialNo: item,
                        imgUrl: [],
                        serialNumber: ''
                    })
                })
                that.dialogUpload.flag = true
            }).catch(error => {
                loginInit.close()
                that.$message({
                    type: 'warning',
                    message: error
                })
            })
        }

2.上传设备弹框

每组多张图片上传成功以后把图片地址存放在一个数组里，回传到对象数组里

<el-dialog title="上传设备" :visible.sync="dialogUpload.flag" width="60%" class="dialogUpload">
        <div v-for="(item, index) in dialogUpload.items" :key='index'>
            <el-form :inline="true" label-width="120px">
                <el-form-item label="库存条码:">
                    <el-input  v-model="item.inventorySerialNo" v-text="item.inventorySerialNo"></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-width="120px">
                <el-form-item label="设备图片:">
                    <el-upload
                    :action="$store.getters.publicStateList.pubLicUrl.upLoadUrl"
                    list-type="picture-card"
                    :file-list="item.fileList"
                    :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item)"
                    :on-remove="(file, fileList) => handleRemove(file, fileList, item)"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-form :inline="true" label-width="120px">
                <el-form-item label="设备序列号:">
                    <el-input  v-model="item.serialNumber"></el-input>
                </el-form-item>           
            </el-form>
        </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpload.flag=false">取 消</el-button>
            <el-button type="primary" @click="uploadDevice">确 定</el-button>
          </div>
      </el-dialog>

export default {
    name: 'addInventory',
    data() {
        return {
            dialogUpload: {
                flag: false,
                id: '', // 设备ID
                items: [] // 设备列表
            },
            uploadItems: [],
            fileList: []
        }
    },
    methods: {
        handleRemove(file, fileList, item) {
            item.imgUrl = []
            for (var i = 0; i < fileList.length; i++) {
                if (fileList[i].response) {
                    item.imgUrl.push(fileList[i].response.url)
                } else {
                    item.imgUrl.push(fileList[i].url)
                }
            }
        },
        handleSuccess(res, file, fileList, item) {
            item.imgUrl = []
            for (var i = 0; i < fileList.length; i++) {
                if (fileList[i].response) {
                    item.imgUrl.push(fileList[i].response.url)
                } else {
                    item.imgUrl.push(fileList[i].url)
                }
            }
        }
    }
 }

3.上传设备：

对象数组传到后台需要先编码，同时后台接收到数据以后要先进行解码

        uploadDevice() { // 上传设备
            var params = {}
            var that = this

            var isNull = false
            that.dialogUpload.items.forEach((item, index) => {
                console.log(item)
                if (item.imgUrl == undefined || item.imgUrl.length <= 0) {
                    that.$message({
                        type: 'warning',
                        message: '请上传设备图片'
                    })
                    isNull = true
                    return
                } else if (item.serialNumber == '') {
                    that.$message({
                        type: 'warning',
                        message: '请填写设备序列号'
                    })
                    isNull = true
                    return
                }
            })

            if (isNull == false) {
            params.ownerIntentionId = that.dialogUpload.id // 库存ID
            params.proItemList = encodeURIComponent(JSON.stringify(that.dialogUpload.items)) // 设备数组 
            var loginInit = that.loadingInit('.addInventory')
            uploadProItem(params).then(res => {
                loginInit.close()
                that.$message({
                    type: 'success',
                    message: '上传成功'
                })
                that.dialogUpload.flag = false
            }).catch(error => {
                loginInit.close()
                that.$message({
                    type: 'warning',
                    message: error
                })
            })
            }
        }