html部分

<template><div><img ref="img" style="width:200px;overflow:hidden"/><div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">拖拽图片上传</div></div>
</template>

js部分

    handleDrop(e) {e.stopPropagation()e.preventDefault()if (this.loading) returnconst files = e.dataTransfer.filesif (files.length !== 1) {this.$message.error('仅支持上传一张图片')return}const rawFile = files[0] // 文件信息const file = new FileReader();file.readAsDataURL(rawFile);file.onload = e=> {this.$refs.img.src = e.target.result;}e.stopPropagation()e.preventDefault()},handleDragover(e) {e.stopPropagation()e.preventDefault()e.dataTransfer.dropEffect = 'copy'},

拓展

FileReader对象

new FileReader有四种方法
1.abort 参数为none 用来中断读取
2.readAsBinaryString 参数为 file（实例对象）将文件读取为二进制码
3.readAsDataURL 同上 将文件读取为 DataURL
4.readAsText 将文件读取为文本

FileReader处理事件

1. onabort 中断时触发
2. onerror 出错时触发
3. onload 文件读取成功完成时触发 （一般在这里获取图片路径，e.target.result）
4. onloadend读取完成触发，无论成功或失败
5. onloadstart 读取开始时触发
6. onprogress读取中

H5 dataTransfer拖拽

dataTransfer对象的事件

• dragstart：网页元素开始拖动时触发。
• drag：被拖动的元素在拖动过程中持续触发。
• dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
• dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
• dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
• drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。 dragend：网页元素拖动结束时触发

dataTransfer对象的属性

• dropEffect：拖放的操作类型，copy、move、link和none
• files：文件对象，表示拖放的文件，主要用于处理从文件系统拖入浏览器的文件
• types：储存在DataTransfer对象的数据的类型

dataTransfer对象的方法

• setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。例如：e.dataTransfer.setData(‘text/plain’, ‘hello world’)
• getData(format)：从dataTransfer对象取出数据，参数是setData的第一个参数。e.dataTransfer.getData(‘text/plain’)
• clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
• setDragImage(imgElement, x,y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。