1、读取图片

使用 Vue 的 ref 属性，您可以轻松地从 input 中读取文件，并判断文件的类型是否是图片，并通过预览的形式展现给用户，以下是上传文件的在线预览的代码示例：

const app = new Vue({
  data: () => ({ example: null, image: false, preview: null }),
  template: `
    <div style="border-style:solid">
      <input type="file" ref="file" @change="readFile()" />
      <div v-if="Image">
        <img :src="preview" />
      </div>
    </div>
  `,
  methods: {
    readFile() {
      this.example = this.$refs.file.files[0];
      if (
        this.example.name.includes(".png") ||
        this.example.name.includes(".jpg")
      ) {
        this.image = true;
        this.preview = URL.createObjectURL(this.example);
      } else {
        this.image = false;
      }
    }
  }
});

2、读取文本文件

使用 JavaScript 的 FileReader 类，您可以读取文本文件并将其显示在页面上，示例代码如下：

const example = new Vue({
  data: () => ({ file: null, content: null }),
  template: `
    <div style="border-style:solid">
      <input type="file" ref="doc" @change="readFile()" />
      <div>{{content}}</div>
    </div>
  `,
  methods: {
    readFile() {
      this.file = this.$refs.doc.files[0];
      const reader = new FileReader();
      if (this.file.name.includes(".txt")) {
        reader.onload = (res) => {
          this.content = res.target.result;
        };
        reader.onerror = (err) => console.log(err);
        reader.readAsText(this.file);
      } else {
        this.content = "check the console for file output";
        reader.onload = (res) => {
          console.log(res.target.result);
        };
        reader.onerror = (err) => console.log(err);
        reader.readAsText(this.file);
      }
    }
  }
});

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载