vue——js实现图片/文件的拖拽上传（复制粘贴就能用，还有优化空间）

首先先创建元素容器

<template>
  <div id="drop">
    <span v-show="isUpload" class="tip">拖拽图片/文件上传</span>
    <img src="" alt="" class="up-img" v-show="!isUpload" />
  </div>
</template>

写好元素样式

<style scoped lang="scss">
#drop {
  width: 200px;
  height: 200px;
  border: 3px dashed #ccc;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 37%;
    width: 80px;
    margin-left: -40px;
    margin-top: -5px;
    border-top: 10px solid #ccc;
  }
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 37%;
    height: 80px;
    margin-left: -5px;
    margin-top: -40px;
    border-left: 10px solid #ccc;
  }
  .tip {
    position: absolute;
    bottom: 20px;
    z-index: 99;
  }
  .up-img {
    width: 200px;
  }
}
.hide {
  &::after {
    display: none;
  }
  &::before {
    display: none;
  }
}
</style>

效果如下 背景色是没有的 我自己加的

js代码

<script>
import { nextTick, onMounted, ref } from '@vue/runtime-core';
export default {
  setup() {
    let isUpload = ref(true);
     // 当拖拽元素第一次进入触发
    function dragEnter(e) {
      e.stopPropagation();
      e.preventDefault();
    }
//持续触发 当元素或者选择的文本被拖拽到一个有效的放置目标上时
//，触发 dragover 事件(每几百毫秒触发一次)；这个事件在可被放置元素的节点上触发。
    function dragOver(e) {
      e.stopPropagation();
      e.preventDefault();
    }
// 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出
    function drop(e) {
      e.preventDefault();
      // 当文件拖拽到dropBox区域时,可以在该事件取到file
      // 根据自己情况 在这里写网络请求
      var file = e.dataTransfer.files[0];
      var _type = file.type;
      console.log(_type);
      //file.type; 文件类型
      //file.name;文件名
      //file.size; 文件大小 btye
      var img = document.getElementsByTagName('img')[0];
      const tip = document.querySelector('.tip');
      const dropBox = document.querySelector('#drop');

      //如果是图片 粗略判断
      if (_type.indexOf('image') > -1) {
        var dataURL = URL.createObjectURL(file);
        img.src = dataURL;
        isUpload.value = false;
      } else {
        // 粗略处理
        tip.innerText = '文件：' + file.name;
        isUpload.value = true;
      }

      var formData = new FormData();
      formData.append('file', file);
      // 隐藏加号
      dropBox.classList.add('hide');
      console.log(file);
    }
    onMounted(() => {
      nextTick();
      // 此处定义一个drop容器(省略),并取到该元素;
      //参数三默认为false，表示在事件冒泡阶段调用；当该值为true时，表示在事件捕获阶段调用。
      const dropBox = document.querySelector('#drop');
      //拖动后首次在进入某个控件内发生
      dropBox.addEventListener('dragenter', dragEnter, false); 
      // 拖放对象悬浮拖放区域，在拖放区域移动会多次触发
      dropBox.addEventListener('dragover', dragOver, false); 
      // 源对象落在目标对象上
      dropBox.addEventListener('drop', drop, false); 
    });
    return {
      isUpload
    };
  },
  components: {}
};
</script>

效果: 如果是文件 这里是没有写样式 而是用文字代替

缺点: 上传第一张图片了，我在网页拖动这个图片，还会继续触发图片上传。
解决建议：根据自己需求加个锁 lock 什么时候开锁能请求，什么时候不能请求