vue 图片上传到页面浏览器

效果图

代码详情

<template>
  <div class="p-clip-path">
    <h3 @click="handleOpen">input-image</h3>
    <span> 图片上传</span>
    <div class="p-input c-w-100">
      <input type="file" @change="handleUpload" ref="input" accept="image/*" />
    </div>
    <img id="image" class="c-w-100" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({})
export default class PageClipPath extends Vue {
  handleUpload(value: Event): void {
   const target = e.target as HTMLInputElement;

    //新建 FileReader 对象
    let reader = new FileReader();
    //新建 FileReader 对象
    reader.onload = function () {
      // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
      // 设置image 的src的值为 FileReader的值
      (document.getElementById("image") as HTMLImageElement).src = this.result as string;
    };
    // 设置以什么方式读取文件，这里以base64方式
    reader.readAsDataURL(target.files[0]);
  }

}

实现思路

• 首先通过input设置为type,上传图片类型 accept="image/*"属性。
• 设置事件change就可以将上传事件回调。
• 回调函数中handleUpload 会返回一个对象事件 Event。
• 这个事件里面有个target属性，表示是这个事件发起的目标，也就是当前这个input标签。
• 这个标签上传后files是个数组保存已经本地提交后的file对象。
• 但是这个这个file是个二进制数据，不是base64，所以通过 FileReader 转成base64。
• 最后将img标签的src的赋值上去就可以了