div 拖拽上传

weixin_45817180

已于 2022-08-09 14:35:33 修改

阅读量309

点赞数 1

文章标签：前端 javascript html

于 2022-08-09 14:34:20 首次发布

本文链接：https://blog.csdn.net/weixin_45817180/article/details/126247010

版权

div 拖拽上传

// html
<div class="right-box up-file-box" @dragover="fileDragover" @drop="fileDrop">
 <img src="@/assets/image/icon-excel-up.png" alt="">
  <p class="p-tips" v-if="fileName==''">拖拽文件到这里</p>
  <p class="p-tips" v-else>{{fileName}}</p>
  <el-button class="select-flex-btn" @click="zh_uploadFile()">选择文件</el-button>
  <input type="file" ref="evfile" @change="uploadFile" style="display: none"/>
</div>

//选择上传文件
 zh_uploadFile() {
   this.$refs.evfile.click();
 },
// 拖拽上传
fileDragover (e) {
  e.preventDefault()
},
fileDrop (e) {
 e.preventDefault()
  const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
  this.fileName = file.name
  this.uploadFile(e)
},
//选择文件后触发的事件
 uploadFile(evfile) {
   let file = evfile.target.files[0];
   this.fileName = file.name
   let isLt2M = file.size / 1024 / 1024 < 2; // 判定图片大小是否小于5MB
   let formData = new FormData();
   formData.append("file", file);
   evfile.target.value = ""; // 上传后清除
  }