点击/拖拽两种方式，预览并上传png/jpg/jpeg格式图片

<template>
  <div class="content">
    <div class="PictureBox">
        <img class="Picture"   alt="请将图片拖拽到此处或点击选择文件"/>
    </div>
    <!-- 按钮 -->
    <div  style="margin-top: 20px;" class="Button">
      <input  type="file" @change="selectPicture($event)" ref="img" />
      <!-- <span class="imgName" style="font-size: 5px">未选择图片</span> -->
      <button  @click="upload" >上传</button>
    </div>

  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        imgUrl: '',
      }
    },
    mounted() {
      let upload = document.querySelector('.Picture');
      upload.addEventListener('dragenter', this.onDrag, false);
      upload.addEventListener('dragover', this.onDrag, false);
      upload.addEventListener('drop', this.onDrop, false);
    },
    methods: {
      onDrag (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop (e) {
        e.stopPropagation();
        e.preventDefault();
        console.log("dddd")
        this.imgPreview(e.dataTransfer.files);
        // this.uploadFile(e.dataTransfer.files);
      },
      //图片预览
      imgPreview (files) {
        console.log("cccc")
        let read = new FileReader();
        let imgUrl = document.querySelector('.Picture');
        read.readAsDataURL(files[0]);
        read.onload = function () {
          document.querySelector('.Picture').src = this.result;
        }
      },
      // 点击按钮选择图片
      selectPicture(e) {
        let imgfile = this.$refs.img;
        let reader = new FileReader();
        reader.readAsDataURL(imgfile.files[0]);
        // document.querySelector('.imgName').innerHTML = imgfile.files[0].name;
        reader.onload = function() {
        document.querySelector('.Picture').src = this.result;
        };
      },
      //图片上传
      upload (files) {
        let params = new FormData();
        params.append('file', files[0]);
        axios.post('http://localhost:3000/upload', params);
      }
    },
  }


</script>

<style>
  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .PictureBox {
    display: flex;
    width: 400px;
    height: 200px;
    border: 1px solid ;
    justify-content: center;
    align-items: center;
    /* background-color: #00FFFF; */
  }
  .Picture{
    display: flex;
    width: 90%;
    height: 90%;

    border: 2px dashed #f00;
    /* background-color: #00FF00; */
  }

</style>

 

备注：拖拽时文件名有bug,有空完善