美文网首页
v-for结合el-upload上传时携带更多信息

v-for结合el-upload上传时携带更多信息

作者: 大码猴 | 来源:发表于2023-04-19 18:07 被阅读0次

最近在使用for循环和el-upload上传图片时需要进行数据绑定,要知道存储图片对象的的index,方便进行赋值。
中间想了各类方法, :http-request="httpPicRequest(index,file)"可以解决,但是校验类型比较麻烦
最终选择了before-upload结合bind方式实现:before-upload=" handleBeforePicUpload.bind(null, { type: '.jpg,.png' })",记录一下方便以后在遇到类似问题能想起来。

<el-upload
            :file-list="coverPicList"
            :action="action"
            list-type="picture-card"
            :limit="1"
            :data="fileData"
            accept=".jpg,.png"
            :before-upload="
              handleBeforePicUpload.bind(null, { type: '.jpg,.png' ,index:index})
            "
            :on-preview="handleUploadPicPreview"
            :on-remove="handleCoverPicRemove"
            :on-error="handleUploadPicError"
            :on-exceed="handleExceed"
            :multiple="false"
          >
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handleUploadPicPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleCoverPicRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>

相关文章

网友评论

      本文标题:v-for结合el-upload上传时携带更多信息

      本文链接:https://www.haomeiwen.com/subject/akuljdtx.html