首页与我联系

「短文」如何在 Vue 中预览上传的文件(Read Files)

By 前端达人
Published in 3-Vue
September 16, 2022
1 min read
「短文」如何在 Vue 中预览上传的文件(Read Files)

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);
      }
    }
  }
});

前端达人公众号.jpg

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


Tags

vuebasic
Previous Article
「短文」如何在 Vue 中使用拖拽方式上传文件
前端达人

前端达人

专注前端知识分享

Table Of Contents

1
1、读取图片
2
2、读取文本文件

相关文章

「短文」如何在 Vue 中复制文本到剪贴板
November 04, 2022
1 min

前端站点

VUE官网React官网TypeScript官网

公众号:前端达人

前端达人公众号