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

最新推荐文章于 2024-07-10 10:07:13 发布

Buiiil

最新推荐文章于 2024-07-10 10:07:13 发布

阅读量3.5k

点赞数

分类专栏：前端文章标签： js vue

本文链接：https://blog.youkuaiyun.com/qq_35119405/article/details/107641717

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在Vue项目中，针对不同规格动态上传图片的方法。通过在upload组件中使用自定义的http-request函数，实现了图片与规格值的一一对应，并将数据存储在对象中，以{规格值，图片地址}

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

需求是需要给不同规格上传规格图片，于是有了一个动态遍历的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>