vue实现拖拽上传

功能需求

实现指定区域内从文件夹拖拽多个图片文件上传

代码实现

1.在需要拖拽的区域加一个div，主要是指定区域id

<div id="drop_area" style="min-height: 400px">

2.在methods里面定义拖拽和拖拽松开的方法

//拖拽多个
      multipleDragEvent() {
        let dropbox = document.getElementById('drop_area');
        dropbox.addEventListener("drop", this.eventDrop, false)
        dropbox.addEventListener("dragleave", function (e) {
          e.stopPropagation();
          e.preventDefault();
          dropbox.style.backgroundColor="#fff"
        })
        dropbox.addEventListener("dragenter", function (e) {
          e.stopPropagation();
          e.preventDefault();
          dropbox.style.backgroundColor="#fff"
        })
        dropbox.addEventListener("dragover", function (e) {
          e.stopPropagation();
          e.preventDefault();
          dropbox.style.backgroundColor="#eee"
        })
      },

 eventDrop(e) {
        e.stopPropagation();
        e.preventDefault();  //必填
        this.documentList=[]
        this.documentPath=""
        let fileData = e.dataTransfer.files;
        for (let i=0;i<fileData.length;i++){
          this.uploadFile(fileData[i])
         }


      },

3.将e.dataTransfer.file的值进行处理，调用上传接口方法，这里用到了FormData对象，具体参见FormData 对象的使用 - Web API 接口参考 | MDN

     //调用上传接口
       uploadFile(fileData) {
        const form = new FormData()
          form.append('biz', this.bizPath)
          form.append('cover', "false")
          form.append('coverUrl', "undefined")
          form.append('file', fileData)
         postAction("/sys/common/upload",form).then(res=>{
            // console.log(res)
        //根据实际需求处理数据，处理之后调用更新视图方法
       this.uploadAll(this.documentPath)
      },

4.在mounted里面调用拖拽方法

 mounted() {
      this.multipleDragEvent()
    },

5.上传调用添加更新到列表的方法

      uploadAll(files) {
        //添加更新到视图列表的方法
      },

问题记录

项目重新封装了ant组件库的上传组件，原以为要将拖拽的文件格式转成封装之后的文件格式形式，在网上收了好久没有收到，后面通过调试，发现不用转成封装之后的文件形式，只需要调用上传接口，拿到后端返回的文件ID，通过返回的ID去处理渲染数据就可以实现。

问题反思

凡事不要老是一根筋只想一种方法，明白其实现的原理和需要达到的效果，也可以通过其他途径实现的