实现elementui 上传图片拖拽功能问题

Z时代
2024-03-10
分类：IT

目前需求想要使用element ui的上传图片组件并实现拖拽，在网上找了一个方法,但是目前点击上传后，on-success方法都没有执行，求各位大佬帮看看，感谢

     <div class="itemContent">
                  <draggable
                    v-model="productForm.productPicList"
                    class="list-group"
                    tag="ul"
                    v-bind="dragOptions"
                    @start="productForm.drag = true"
                    @end="productForm.drag = false"
                  >
                    <div
                      v-for="(item, index) in productForm.productPicList"
                      :key="index"
                      v-loading="productForm.loadingapp"
                      class="listitem"
                      @mouseenter="showDelBtn(index)"
                      @mouseleave="hiddenDelBtn"
                    >
                      <img
                        v-if="item"
                        :src="item"
                        class="imgSty"
                      />
                      <i
                        v-show="index == productForm.currentDelBtn"
                        class="el-icon-delete delIcon"
                        @click="deleImg(item, index)"
                      />
                    </div>
                  </draggable>
                  <div class="uploadIcon">
                    <el-upload
                      :show-file-list="false"
                      action=""
                      list-type="picture-card"
                      :on-success="handlePictureSuccess"
                    >
                      <i class="el-icon-plus" />
                    </el-upload>
                  </div>
                </div>
 data() {
    return {
      productForm: {
        productPicList: [],
        currentDelBtn: -1,
        loadingapp: false,
        drag: false
      },
}
},
computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
 //显示删除图片的图标
    showDelBtn(index) {
      console.log(index)
      this.productForm.currentDelBtn = index
    },
    //隐藏删除图片的图标
    hiddenDelBtn() {
      this.productForm.currentDelBtn = -1
    },
    // 删除图片
    deleImg(data, index) {
      this.productForm.productPicList.splice(index, 1)
    },
   handlePictureSuccess(response, file, fileList) {
      debugger
      console.log(file,'iodysaidsyaiodysaiodysao')
      const isJPG = file.raw.type === 'image/jpeg'
      const isJPG2 = file.raw.type === 'image/jpg'
      const isPNG = file.raw.type === 'image/png'
      const isGIF = file.raw.type === 'image/gif'
      const isLt5M = file.raw.size / 1024 < 100
      // const isSize = this.imgSize(file)
      // if (!isJPG && !isJPG2 && !isPNG && !isGIF) {
      //   this.$message.warning('只支持jpg或png或gif格式图片')
      //   return
      // }
      // if (!isLt5M) {
      //   this.$message.warning('商品图片须小于100K!')
      //   return
      // }
      // if (this.productForm.productPicList.length >= 5) {
      //   this.$message.warning(`当前限制选择 5 张图片`)
      //   return
      // }
      //以下代码是验证是否符合比例，如果不需要验证比例可以直接把图片push到数组里
      // this.productForm.productPicList.push(file.response.data)
    },