vue实现表单图片拖动

vue实现表单图片拖动
实现效果

第一：首先尝试安装最新版本的 sortablejs 和 vuedraggable，并更新依赖：

npm install vuedraggable
npm install sortablejs@latest vuedraggable@latest --save

版本不一致的话

npm install vuedraggable@latest sortablejs@latest --save

如果还是有问题可以先清除项目本地中的node_modules文件包（可以备份一下）
最后

npm install

<el-form-item :label="图片" prop="imageUrl">
          <div class="image-list">
            <draggable
              v-model="imageUrlList"	<!--图片来源（包含图片地址）-->
              class="list-group"
              tag="ul"
              v-bind="dragOptions"
              @start="drag = true"
              @end="drag = false"
              style="display: flex;margin-left: -30px; margin-top: -2px;"
            >
              <div v-for="(item, index) in imageUrlList" :key="index" class="listitem"
                   @mouseenter="showDelBtn(index)" @mouseleave="hiddenDelBtn">
                <img v-if="item" :src="item.url" width="148" height="148" class="imgSty" :key="item.url">
                <i v-show="index == currentDelBtn" class="el-icon-delete delIcon" @click="deleImage(item, index)" />
              </div>
            </draggable>
            <div class="uploadIcon">
              <el-upload
                :show-file-list="false"
                action=""
                list-type="picture-card"
                :http-request="handlePostV2"
                :on-success="handlePictureSuccess"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </div>
          </div>
        </el-form-item>

data() {
    return {
      currentDelBtn: -1,
      drag: false,
      imageUrlList: [],
      imageUrl: "",
       type : false,
    }
 },
 computed: {
   dragOptions() {
     return {
       animation: 200,
       group: "description",
       disabled: false,
       ghostClass: "ghost"
     };
   }
 },
 methods: {
	//显示删除图片的图标
    showDelBtn(index) {
      console.log(index)
      this.currentDelBtn = index
    },
    //隐藏删除图片的图标
    hiddenDelBtn() {
      this.currentDelBtn = -1
    },
    // 删除图片
    deleImage(data, index) {
      this.imageUrlList.splice(index, 1)
    },
    handlePictureSuccess(response, file) {
      const fileType = file.name.substring(file.name.lastIndexOf(".")+1);
      if (fileType === "image"||fileType === "png"||fileType === "jpg"||fileType === "jpeg"||fileType === "webp") {
        this.type = true;
      }else{
        this.$message({
          message: "上传文件只能是图片格式!",
          type: "error",
          showClose: true,
        });
      }
    },
    getImage(Id) {
    	//调用获取图片的接，访问后端
      get(goodsId).then((response) => {
        this.form = response.data;
        if (this.form.imageUrls && this.form.imageUrls.length) {
          for (let i = 0; i < this.form.imageUrls.length; i++) {
            const e = this.form.imageUrls[i];
            this.imageUrlList.push({ url: e, imageBkUrl: e });
          }
        }
      });
    },
     handlePost(content) {
     //调用图片上传的接口
      this.uploadImg(content.file).then((res) => {
        this.handlePictureSuccess(res, content.file);
        console.log("this.type111111111111111:"+this.type)
        if(this.type){
          this.imageUrlList.push({ url: res.url, imageBkUrl: res.url });
        }
      });
    },
}

图片样式调整

<style scoped="scoped" lang="scss">
.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.listitem {
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  padding: 10px; /* 添加内边距 */
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #c0ccda;
  display: flex;
  justify-content: center; /* 让图片居中 */
  align-items: center; /* 让图片居中 */
}

.listitem img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.delIcon {
  top: 10px;
  right: 10px;
  color: red;
}

</style>