图片拖拽上传

功能： 实现图片拖拽上传并能显示拖拽进去的图片
下面是html的页面内容（此例子是在vue中应用，有用到element ui的组件）：

<div class="aileft">
	<div
      class="dragImg"
      @dragenter="dragEnter"
      @dragleave="dragLeave"
      @dragover="dragOver"
      @drop="drop">
        <div v-if="imgSrc == ''" class="prompt">
          <div class="uploadtext">
            <i class="el-icon-upload"></i>
            <span>请将文件拖拽到此处!</span>
          </div>
        </div>
        <img v-if="imgSrc != ''" :src="imgSrc" id="img">
    </div>
</div>

接下来，实现拖拽上传的功能
script 里的代码实现：

<script>
import * as config from "@/config/config";
export default {
  data() {
    return {
      imgSrc: ""
    };
  },
  methods: {
    dragEnter(e) {
      // 拖拽进入时触发的方法
    },
    dragLeave(e) {
      // 拖拽离开时触发的方法
    },
    dragOver(e) {
      // 拖拽在div中不松鼠标，移动时触发的方法
      e.preventDefault();
    },
    async drop(e) {
    // 拖拽后放入时触发的方法
      e.preventDefault();
      let files = e.dataTransfer.files;
    // 创建FileReader用来读取拖拽的图片
      let fd = new FileReader();
      let self = this;
     // 这里是判断上传的文件是否为图片
      if (files[0].type.indexOf("image") != -1) {
      // 这里是限制拖拽的图片大小，本例中上传图片不能超过1M
        if (files[0].size > 1048576) {
          this.$message({
            message: "图片大小不能超过1M",
            type: "warning",
            duration: 2000
          });
          return false;
        }
      // 将拖拽的文件流转化为可用的img 路径，赋值给img 的src，即可展示该图片
        fd.readAsDataURL(files[0]);
        fd.onload = function() {
      // 将路径赋值给img 的 src
          self.imgSrc = this.result;
        };
      // 创建FormData对象 formdata，用于接收文件参数，接口请求时作为参数提交
        let formdata = new FormData();
        formdata.append("image", files[0]);
        
        // 发送请求 上传图片
        const response = await this.$http.post(config.ImgUploadTest, formdata);
        const { errCode, msg, data } = response.data;
        if(errCode == 0){
        	console.log(‘图片上传成功！’)
        } else {
            console.log(‘图片上传失败！’)
        }
      } else {
      // 如果上传不是图片，给出提示
        this.$message({
          message: "仅支持拖拽图片",
          type: "warning",
          duration: 2000
        });
        return false;
      }
    }
  }
};
</script>

效果图如下：

拖拽图片后 ：
图片拖拽至div中，即请求图片上传接口，到此图片拖拽上传的简单示例就完成了。