vue + vuedraggable 实现拖拽上传图片预览删除功能

问题：vue2+el-upload组件上传的图片 实现图片拖拽

 第一段代码整洁使用 需要先下载vuedraggable插件 npm i vuedraggable

// 简单来说 拖拽上传 

          

            
            
            
              
              
                
              
              
                
              
            
          
        
// 样式自己调一下就行 
// :show-file-list="false"这个属性需要加 不走el-upload默认的列表

import draggable from "vuedraggable";
export default {
  props: {
    width: {
      type: String,
      default: "100%",
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    url: {
      type: [Array, String],
      default() {
        return [];
      },
    },
    isRequested: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 9,
    },
    multiple: {
      type: Boolean,
      required: true,
    },
    isBatch: Boolean,
  },
  components: {
    draggable,
  },
  data() {
    return {
      dialogImageUrl: noPhoto,
      noPhotoSrc: noPhoto,
      dialogVisible: false,
      upData: {
        type: "image",
      },
      src: "",
      urlList: [],
      imgHeader: localStorage.getItem("file_domain") || "",
      dialogFileUrl: "",
      fileUrlVisible: false,
      maskObj: {
        flag: false,
        url: "",
      },
      pictureUrl: [],
    };
  },
  computed: {
    defaultAction() {
      return (
        this.action || "http://192.168.1.30:8090/ohd/specialist/minio/upload"
      );
    },
    headers() {
      return {
        "X-Access-Token": getToken(),
      };
    },
    // 判断只允许单张上传图片时，图片是否已经上传
    isImgUpload() {
      return this.dialogImageUrl === this.noPhotoSrc;
    },
    upload_btn() {
      return this.limit === this.urlList.length;
    },
  },
  created() {
    this.getUrl();
    if (this.multiple) {
      // console.log();
      this.urlList = this.url.map((item) => {
        return {
          name: "file",
          url: this.imgHeader + item,
        };
      });
    } else if (this.url) {
      // this.dialogImageUrl = this.imgHeader + this.url;
      this.urlList = this.url;
    }
  },
  mounted() {},
  updated() {
    this.getUrl();
  },
  methods: {
    getUrl() {
      this.pictureUrl = this.url;
    },
    updateList(e) {
      const newIndex = e.newIndex; // 新位置下标
      const oldIndex = e.oldIndex; // 原始位置下标
      // 打印出新位置 位置从0开始算
    },
    handlePictureCardPreviewFileDetail(file) {
      console.log(this.url);
      this.dialogImageUrl = file.address;
      this.dialogVisible = true;
    },
    // 删除
    handleRemoveFileDetail(item, index) {
      console.log(item, index);
      this.url.splice(index, 1);
    },
    // 最大上传张数
    onExceed(file, fileList) {
      this.$message.warning(`上传图片不超过${this.limit}张`);
    },
    // 删除
    handleRemove(file, fileList) {
      this.$emit("delUrl", file, fileList);
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 阻止upload的自己上传，进行再操作
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        // 图片大小大于5MB
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }
    },
    uploadClick() {
      this.$emit("onClick");
    },
    // 只允许上传单张图片时删除 图片
    deleteUrl() {
      this.dialogImageUrl = noPhoto;
      this.$emit("delUrl");
    },
  handleSuccess(response, file, fileList) {
      if (this.multiple) {
        this.pictureUrl.push(file["response"].data);
        // this.$emit("onSuccess", file);
      } else {
        if (isSuccess(response.code)) {
          this.dialogImageUrl = file.url;
          this.pictureUrl.push(file["response"].data);
          // this.$emit("onSuccess", file);
        } else {
          this.dialogImageUrl = noPhoto;
          this.$message.error(response.msg);
        }
      }
    },
    // 预览文件
    handlePreview(file) {
      console.log(file);
    },
    // 下载文件
    downFile(file) {
      window.location.href = file.url;
    },
  },
  watch: {
    isRequested: {
      handler() {
        this.urlList = this.url.map((item) => {
          return {
            name: "file",
            url: localStorage.getItem("file_domain") + item,
          };
        });
      },
      deep: true,
      immediate: true,
    },

    // 如果传进来的url为空，那么清空已经存在的图片
    url(val) {
      if (val && !val.length) {
        this.urlList = [];
      }
      // else {
      //   this.urlList = val.map((item) => {
      //     if (typeof item === "string") {
      //       return {
      //         name: "file",
      //         url: this.imgHeader + item,
      //       };
      //     } else {
      //       return {
      //         name: "file",
      //         url:
      //           this.imgHeader +
      //           `${decodeURIComponent(item.address)}${decodeURIComponent(
      //             item.path
      //           )}`,
      //       };
      //     }
      //   });
      // }
    },
    pictureUrl: {
      handler(value) {
        this.$emit("update:url", value);
      },
      immediate: true,
    },
  },
};