实现一个这样的功能
第一点: 将这个dom元素添加拖拽事件
第二点: 隐藏一个input组件当点击选择文件上传弹起input组件上传
第三点: 将上传的文件回显(看需求回显大部分是两种,一种是显示文件名称,格式,大小, 另一种大概就是生成路径回显)
onFileDrop(event) {
//这就是获取的拖拽文件
event.dataTransfer.files[0]
}
onDragEnter,onDragLeave方法可以实现当拖拽时告诉用户松开鼠标上传文件
<input style="displa: none" ref="fileInput" type="file" @change="onFileSelect" accept="apk" />
accept代表你可以上传什么类型的文件
当点击选择文件上传,弹起input标签 this.$refs.fileInput.click();
通过onFileSelect里的event.target.files[0]获取文件
可以限制文件大小
const size = 1024 * 1024 这是1M