js封装上传组件 点击拖拽上传

效果图

上传组件代码

<template>
    <div id="appp">
        <label for="fileInput" class="upload"  @dragover="fileDragover" @drop="fileDrop" v-if="log != 'checkLog'">
            <!-- <div class="jia" v-if="!loadingBool">+</div>
            <div class="jia" v-else><i class="el-icon-loading" style="font-size: 30px;"></i></div> -->
            <div class="jia">+</div>
            <div class="text1">拖放或点击上传</div>
            <div class="text2">仅支持 PDF、JPG 和 PNG 格式。最大文件尺寸 100 MB。</div>
        </label>
        <div v-for="(item,index) in value" :key="index" class="imgContainer">
          <el-image
              style="width: 100%;height: 100%;display: inline-block;"
              :src="resourUrl + item"
              fit="cover">
          </el-image>
          <el-button icon="el-icon-close" class="delBtn" circle size="mini" @click="delImg(index)" v-if="log != 'checkLog'"></el-button>
        </div>
      <div>
        <input type="file" id="fileInput" accept="image/*" @change="chooseUploadFile" style="display: none;">
      </div>
    </div>
  </template>
  
  <script>
   import api from "@/api/http";
import { index } from "@antv/x6/lib/util/dom/elem";
  export default {
    props: {
      value: {
          type: Array,
          default: ()=>[]
      },
      log: {
          type: String,
          default: ''
      },
    },
    data () {
      return {
        resourUrl:IP.resourUrl,
        MAX_FILE_SIZE: 100 * 1000 * 1000
      }
    },
    watch:{
      value(val){
        this.$emit('input',val)
      },
      immediate: true,
      deep:true
    },
    methods: {
        delImg(index){
          this.value.splice(index,1)
        },
        // 上传图片
        uploadImg(file){
            if (!/\.(jpg|jpeg|png|pdf|PDF|JPG|PNG)$/.test(file.name) ) { 
                this.$message({
                    message: '仅支持 PDF、JPG 和 PNG 格式。',
                    type: 'warning'
                });
                return;     
            }
            if (file.size > this.MAX_FILE_SIZE) {
                this.$message({
                    message: '仅支持最大文件尺寸 100 MB。',
                    type: 'warning'
                });
                return 
            }
            let formData = new FormData();
            formData.append("upFile", file);
            api.getAddFileUrl(formData)
                .then((response) => {
                    let res = response.data;
                    let url = res.message; // 拿到图片url后发送图片消息
                    // this.loadingBool=false
                    this.value.unshift(url)
                }).catch(err => {
                    console.log(err, '错误')
                })
        },
      // 点击上传
      chooseUploadFile (e) {
        console.log(e.target.files);
        const file = e.target.files.item(0)
  
        if (!file) return

        // this.loadingBool=true
        this.uploadImg(file)

        // 清空，防止上传后再上传没有反应
        e.target.value = ''
      },
      // 拖拽上传
      fileDragover (e) {
        e.preventDefault()
      },
      fileDrop (e) {
        e.preventDefault()
        const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
        console.log(file)
        console.log('拖拽释放鼠标时')
  
        if (!file) return
  
        // this.loadingBool=true
        this.uploadImg(file)
        
        // 清空，防止上传后再上传没有反应
        e.target.value = ''
        
      },
    }
  
  }
  </script>
  
  <style lang="less" scoped>
    .imgContainer{
      display: inline-block;
      height: 170px;
      flex-basis: 28%;
      margin-right: 5%;
      margin-bottom: 20px;
      position: relative;
       .delBtn{
        position: absolute;
        top: 5px;
        right: 5px;
       }
    }
    .upload{
        display: block;
        height: 170px;
        flex-basis: 28%;
        margin-right: 5%;
        margin-bottom: 30px;
        border: 1px dashed #D9D9D9;
        background-color: #FBFBFB;
        text-align: center;
        padding: 20px 30px;
        cursor:pointer;
        z-index: 1;
        .jia{
            color: #4E5969;
            height: 50px;
        }
        .text1{
            color: #4E5969;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
        .text2{
            height: 40px;
            line-height: 20px;
            color: #86909C;
            font-size: 12px;
            font-weight: 400;
        }
    }  
    #appp{
        display: flex;
        width: 846px;
        margin-bottom: 30px;
        flex-wrap:wrap;
    }
  </style>
  

父组件引用

<template>
    <uploadImg v-model="form.urls" :log="log"></uploadImg>
</template>

import uploadImg from "@/components/upload/uploadImg.vue";
export default {
    components: {
        uploadImg
    },
}