ElementUI多个图片上传Upload双向数据绑定的问题

需求是需要给不同规格上传规格图片，于是有了一个动态遍历的upload组件，图片要和规格值对应，数据要在一个object里：{规格值，图片地址}

由于upload组件不能使用v-model来进行双向数据绑定，ElementUI带的上传方法只有一个option，不能通过传递数组index来获得这个upload对应的数组的位置

 

解决方法：

参考：https://www.cnblogs.com/AlexBlogs/p/7150532.html

在组件的 :http-request中返回数组的index，如下：

:http-request="(res) => {return uploadCategoryPic(res,index,i)}"

完整代码： 

<el-form-item label="规格值" prop="value" class="form-item" v-for="(cateVal,i) in categoryValueArr[index].value" :key="i">
              <el-input type="text" v-model="categoryValueArr[index].value[i].value" @blur="checkForm()" />
              <i class="el-icon-close valDelBtn" @click="delVal(index,i)"></i>
              <el-upload
                class="avatar-uploader categoryImgUpload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="(res) => {return uploadCategoryPic(res,index,i)}">
                <img v-if="categoryValueArr[index].value[i].picUrl" :src="categoryValueArr[index].value[i].picUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-button type="text" @click="addCategoryValueInput(index)">添加规格值</el-button>
</el-form>