vue 实现文件上传和本地预览

1、图片上传imgUpload.vue

<template>
  <div>
    <div>
      <input v-show="false" type="file" accept="image/*" @change="changeFile($event)" ref="input"/>
      <button @click="uploadImgs">上传图片</button>
      <div v-for="(item,index) in imgList" class="imgList" :key="Math.random()">
        <img style="max-height:100%;max-width:100%;" :src="item"/>
        <span class="delete" @click="deleteImg(index)"> X </span>
      </div>
      <div v-for="(item,index) in imgesList" class="imgList" :key="Math.random()">
        <img style="max-height:100%;max-width:100%;" :src="item"/>
        <span class="delete" @click="deleteImg(index)"> X </span>
      </div>
      <!--<input type="file" id="file"/>-->
      <!--<button type="button" value="读取二进制数据" @click="readAsBinaryString()"/>-->
      <!--<button type="button" value="读取文本文件" @click="readAsText()"/>-->
      <!--<div id="result" name="result"></div>-->
    </div>
  </div>
</template>
<script>
  import {uploadImg} from '../../../../apis/baseMessage/index'

  export default {
    data() {
      return {
        imgList: [],
        imgesList: [],
      };
    },
    methods: {
      // 上传
      uploadImgs() {
        this.$refs.input.click();
      },
      changeFile: function (e) {
        console.log("e", e)
        let file = e.target.files[0];
        //本地展示
        //把file对象/blob对象 转化为base64，可以预览
        var reader = new FileReader();
        reader.readAsDataURL(file);
        let _this = this;
        reader.onload = function (e) {
          _this.imgesList.push(this.result)
          // _this.imgesList.push( "data:image/png;base64," + this.result.substring(this.result.indexOf(",") + 1))
        };
        //上传至服务器后本地展示
        //在上传图片，基本采用的是上传file formData方式。一般上传blob对象和file对象都是可以的，但是
        //有些后台只能是 file对象方式，这个时候需要把blob对象转化为file对象方式。
        var forms = new FormData()
        forms.append('file', file)
        uploadImg(forms).then(res => {
          if (res.status == 200) {
            this.imgList.push(res.data.filePath)
          } else {

          }
        }).catch(res => {

        })
      },
      // 删除图片
      deleteImg(index) {
        this.imgList.splice(index, 1)
      },
      // readAsBinaryString() {
      //   var file = document.getElementById("file").files[0];
      //   var reader = new FileReader();
      //   //将文件以二进制形式读入页面
      //   reader.readAsBinaryString(file);
      //   reader.onload = function (e) {
      //     var result = document.getElementById("result");
      //     //显示文件
      //     result.innerHTML = this.result;
      //   }
      // },
      // readAsText() {
      //   var file = document.getElementById("file").files[0];
      //   var reader = new FileReader();
      //   //将文件以文本形式读入页面
      //   reader.readAsText(file);
      //   reader.onload = function (e) {
      //     var result = document.getElementById("result");
      //     //显示文件
      //     result.innerHTML = this.result;
      //   }
      // }


    }
  }

</script>
<style scoped>
  .imgList {
    width: 100px;
    height: 100px;
    border: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
  }

  .delete {
    cursor: pointer;
    position: absolute;
    right: -5px;
    top: -10px;
  }
</style>