关于拖拽或者点击上传文件

40 阅读1分钟

实现一个这样的功能

企业微信截图_11e46a71-61a3-4069-b609-0b543c872d83.png 第一点: 将这个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