vue项目实现文件拖拽上传

一，基本界面

二，监听拖动事件事件
让vue支持文件拖拽，写在vue的mounted:function(){},里面
将文件拖动到区域（这里的区域就是你的div），监听区域拖动事件

 mounted: function () {
        let _this = this;
      var dropbox = document.getElementById('drop_area');
      dropbox.addEventListener("drop",this.enentDrop,false)
      dropbox.addEventListener("dragleave",function (e) {
        e.stopPropagation();
        e.preventDefault();
        _this.borderhover =  false;
      })
      dropbox.addEventListener("dragenter",function (e) {
        e.stopPropagation();
        e.preventDefault();
        _this.borderhover =  true;
      })
      dropbox.addEventListener("dragover",function (e) {
        e.stopPropagation();
        e.preventDefault();
        _this.borderhover =  true
      })
    },

说明：
1.文件第一次进入拖动区时，触发 dragenter 事件

文件在拖动区来回拖拽时，不断触发 dragover 事件
文件已经在拖动区，并松开鼠标时，触发 drop 事件
4.文件在拖动区来回拖拽时，不断触发dragleave 事件 //拖后放

实现拖动上传，我们只需要关心 drop 事件。不过另外三个事件也需要监听，目的是阻止浏览器默认行为。如果不阻止，那么把文件拖到浏览器时，浏览器就会自动下载这个文件（默认行为，亲们也可以亲测一下），drop 事件触发不出来。

this.enentDrop函数写在你的项目methods:{}里，监听事件会有文件回调e.dataTransfer
enentDrop() 函数现在只这些信息打印了出来，可以了解到，拖动到浏览器的每个文件都是一个 File 对象：

methods:{
      enentDrop: function(e){
        this.borderhover = false
        e.stopPropagation();
        e.preventDefault();  //必填字段
        let fileData = e.dataTransfer.files;
        console.log(fileData);
        this.uploadFile(fileData)
      },
      uploadFile: function (file){   //渲染上传文件
        for (let i = 0; i !== file.length; i++) {
          let fileJson = {
            Url:'',
            progressStatl:0,
            fileText:'',
          };
          let video_type=file[i].type == "video/mp4" || file[i].type == "video/ogg";
          if(file[i].type.indexOf('image') === 0){  //如果是图片
            let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
                fileJson.Url = fileurl;
          }else if(video_type){
              alert("不支持此类型文件")
          }else{

          }
          fileJson.fileText = file[i].name;
          this.fileData.push(fileJson);
        }
      },
      deleteFile:function (index){   //删除已选文件
        this.$popup.open('提示','确定要删除吗',callback=>{
          this.fileData.splice(index,1);
        })
      }
    },

image.png

三，处理拖动上传文件

现在，我们要给 uploadFile()函数增加功能，实现拖动文件时，拖动区出现文件名和一个上传文件名称和进度条。
首先在 Vue 的 data 对象中定义fileData 属性，用来保存所有拖动到浏览器中文件的名称。然后在uploadFile()函数每当被调用时，把文件名和上传进度保存到fileJson.progressStatl 中：

 uploadFile: function (file){   //渲染上传文件
        for (let i = 0; i !== file.length; i++) {
          let fileJson = {
            Url:'',
            progressStatl:0,
            fileText:'',
          };
          let video_type=file[i].type == "video/mp4" || file[i].type == "video/ogg";
          if(file[i].type.indexOf('image') === 0){  //如果是图片
            let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
                fileJson.Url = fileurl;
          }else if(video_type){
             let fileurl = window.URL.createObjectURL(file[i]); //创建一个url连接,供src属性引用
          }else{
               alert("不支持此类型文件")
          }
          fileJson.fileText = file[i].name;
          this.fileData.push(fileJson);
        }
      },

提示：这里拦截了一些文件类型，做了一些处理，如果是上传图片和视频需要预览的可以使用
let fileurl = window.URL.createObjectURL(file[i]);
window.URL.createObjectURL了解作用是，请点击 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

当被调用时，把文件名，和预览生成的路径保存到json里面，然后统一添加到fileData[ ]数组里面，实现上传预览。

 data () {
      return {
        borderhover:false,  //文件拖拖动到区域的hover效果
        imgArr:[],
        fileData:[],
      }
    },

image.png

四，上传到后台后续更新由于后台还没写完接口，敬请期待...

vue项目实现文件拖拽上传

你可能感兴趣的:(vue项目实现文件拖拽上传)