vue中 文件预览

参考链接：MDN:在web应用程序中使用文件

HTML部分

    <!--通过FileReader 预览图片-->
     <!--<el-upload class="upload-demo" :auto-upload="false" action :on-change="handleImgByFileReader">-->
   <!--通过URL. createObjectURL预览文件-->
      <el-upload class="upload-demo" :auto-upload="false" action :on-change="handleImg"> 
        <el-button size="small" type="primary">点击上传图片或者文件预览</el-button>
      </el-upload>
      <img :src="imgUrl" alt="" width="100px" height="100px" />
      <iframe width="200px" height="500px" :src="fileUrl"> </iframe>
      <video :src="videoUrl"></video> 

js部分

export default {
  data() {
    return {
      imgUrl: "", // 图片预览地址
      fileUrl:"",  // 文件预览地址 
      videoUrl:"", // 视频预览地址
    };
  }
} 
 // methods 
  methods: {
    handleImg(file, fileList) {
      // 预览不了word 是乱码   对于excel是默认下载 对于pdf 图片都可以预览
      let objUrl = window.URL.createObjectURL(file.raw);
      this.fileUrl = objUrl;
      this.videoUrl = objUrl;
      this.imgUrl = objUrl;
      // 这个objUrl不再使用后 要释放掉
      window.URL.revokeObjectURL(objUrl);
    },
    readFile(file, type = "base64") {
      return new Promise((resolve) => {
        let fileRead = new FileReader();
        if (type === "base64") {
          fileRead.readAsDataURL(file);
        } else if (type === "buffer") {
          fileRead.readAsArrayBuffer(file);
        } else if (type === "string") {
          fileRead.readAsBinaryString(file);
        }
        fileRead.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },
    async handleImgByFileReader(file, fileList) {
      let data = await this.readFile(file.raw); // 得到的Base64数据
      this.imgUrl = data;
      // console.log(this.imgUrl)
      // 查看数据
      let base64 = await this.readFile(file.raw);
      console.log(base64);
      let buffer = await this.readFile(file.raw, "buffer");
      console.log(buffer); // 返回一个ArrayBuffer的对象
      let BinaryString = await this.readFile(file.raw, "string");
      console.log(BinaryString); // 返回一个二进制的字符串
    },
  },

总结：

1. window.URL.createObjectURL将File或者Blob,转成一个本地的URL地址。可以通过这个地址预览。其中word会乱码，excel会自动下载，pdf和图片可以正常预览。
2. 预览图片也可以通过FileReader转成Base64来预览。
3. 如果excel也想预览的话，可以借助 xlsx 插件，读取数据。然后整理数据。xlsx地址