vue上傳圖片前本地預覽

 思路：上傳前獲取到圖片的base64數據，然後綁定到圖片的src上

<template>
  <!-- 上傳照片 -->
  <div>
    <Upload
      class="writeResumeHeadImg"
      :show-upload-list="false"
      :before-upload="handleUpload"
      action="//jsonplaceholder.typicode.com/posts/"
    >
      <img :src="imgUrl" />
    </Upload>
    <!-- <div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div> -->
  </div>
</template>
<script>
export default {
  name: "jmUploadImg",
  data() {
    return {
      file: null,
      loadingStatus: false,
      imgUrl: "https://static.500d.me/resources/500d/cvresume/images/1.jpg"
    };
  },
  methods: {
    handleUpload(file) {
      // 需要傳給後臺的file文件
      this.file = file;
      // FileReader api 爲用戶提供了方法去讀取一個文件或者一個二進制大對象，
      // 並且提供了事件模型讓用戶可以操作讀取後的結果
      const reader = new FileReader();
      // readAsDataURL：讀取爲base64格式
      reader.readAsDataURL(file);
      // onload 在文件讀取成功時觸發
      reader.onload = () => {
        const ImgBase64 = reader.result;
        // 實現預覽，實際是拿到圖片的base64數據去掛在到圖片的src上
        this.imgUrl = ImgBase64;
      };
      this.postImage();
      return false;
    },
    postImage() {
      var file = this.file;
      let data = new FormData();
      data.append("file", file, file.name); //很重要 data.append("file", file);不成功
      data.append("data", 112);
      console.log(data.get("file"));
      this.axios.post("resumes/file", data, {
        headers: { "content-type": "multipart/form-data" }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.writeResumeHeadImg {
  padding: 0;
}
</style>