拖拽上传图片并转换成base64格式显示

 本文讲解怎么实现 将图片拖拽实现上传 且以base64格式显示出来

首先css准备一个div  要有大小和背景颜色 让我们知道该拖拽到什么地方

      div {
        width: 200px;
        height: 200px;
        background-color: #8df;
      }

然后html 里面放一个div盒子

其实事物本质也是创建一个img

      // dragover： 判断是否有东西拖拽上来。

      // drop  拖拽上来的元素 被松开 

 思路:

 接下来 我们要获取div  监听div的dragover事件 在有东西拖拽的前提下

判断 拖拽上来的元素被松开 drop

然后创建一个对象 

用来存放base64格式代码

然后新建一个img元素  放到div内 让img的src地址 等于我们获取到的图片的base64值(this.result)

let div = document.querySelector("div");
      div.addEventListener("dragover", function (e) {
        div.style.backgroundColor = "#ccc";
        e.preventDefault(); //阻止默认行为
      });
      div.addEventListener("drop", function (e) {
        e.preventDefault();
        e.dataTransfer.files[0];
        // 1.读取