vue拖拽图片到html页面并用axios实现上传

<div
    @drop="drop($event)"
    @dragover="allowDrop($event)"
  ></div>

export default {
  mounted() {
    document.ondragover = function(e) {
      e.preventDefault(); //阻止拖放的图片在新窗口中直接显示,拖放的目标对象此时是document对象
    };
    document.ondrop = function(e) {
      e.preventDefault(); //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
    };
  },
  methods: {
    allowDrop(e) {
      e.preventDefault();
    },
    drop(e) {
      // 方法一
      //这种方法浏览器很多情况下获取都是一个空数组，所以改用以下方法 
      var files = e.dataTransfer.files; 
      
      // 方法二
      var files = [];
      [].forEach.call(
        e.dataTransfer.files,
        function(file) {
          files.push(file);
        },
        false
      );
      console.log(files);
      reader(files[0]); //可在当前页面显示图片

      // 通过axios实现图片上传
      var formData = new FormData();
      formData.append("files", files[0]);
      axios({
        url: "/user/upload",
        method: "post",
        processData: false,
        contentType: false,
        data: formData,
      }).then((res) => {});
    },
    reader(f) {
      var reader = new FileReader();
      reader.readAsDataURL(f);
      reader.onload = function() {
        console.log(reader.result); //当前图片的src，可自行通过dom设置src显示出来
      };
    },
  },
};