通过input file拿本地图片并显示和上传

<template>
  <div class="box">
    <div :class="imgUrl ? 'haveupimg' : 'upimg_box'">
      <span>+</span>
      <input
        ref="avatarInput"
        type="file"
        accept="image/*"
        class="upimg"
        @change="uploadFile($event)"
      >
    </div>
    <div class="res_box">
      <div v-if="imgUrl" class="coutot_box">
        <img :src="imgUrl" alt="">
        <div class="coutot" @click="upimg">抠图</div>
      </div>
    </div>
  </div>
</template>

通过base64显示图片

  data() {
    return {
      imgUrl: null,
      file: '',
    }
  },
  methods: {
    uploadFile(e) {
      var reads = new FileReader()
      var file = e.target.files[0]
      this.file = file
      reads.readAsDataURL(file)
      reads.onload = (e) => {
        this.imgUrl = e.target.result
      }
    },

传给后台转化成file格式（代码如下）

       upimg(e) {
          var formData = new FormData()
          formData.append('file', this.file)
          axios({
            method: 'post',
            url: process.env.VUE_APP_BASE_API + '/tts/cutImage',
            data: formData
          }).then((res) => {
            console.log(res)
          })
        },
      }