VUE 通过文件流预览不同格式的文件 代码如何编写

您好！关于您的问题，以下是Vue通过文件流预览不同格式的文件的一些思路和代码实现：

1.第一步，需要在Vue中用input标签选择文件，并将文件转换为文件流：

<template>
  <div>
    <input type="file" @change="handleFileChange">
  </div>
</template>
<script>
  export default {
    methods: {
      handleFileChange(event) {
        let file = event.target.files[0];
        let reader = new FileReader();
        reader.readAsArrayBuffer(file);//读取文件流
        reader.onload = (e) => {
          let buffer = e.target.result;
          this.previewFile(buffer);//将文件流转换为预览图
        }
      },
      previewFile(buffer) {
        //将文件流转换为预览图的代码
      }
    }
  }
</script>

2.第二步，需要根据不同的文件类型，选择不同的方式进行预览：

previewFile(buffer) {
  let mime_type = 'image/png';//假设文件类型为png
  if (mime_type.indexOf('image/') >= 0) {//如果是图片类型
    let base64 = btoa(
      new Uint8Array(buffer).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ''
      )
    );
    let image_src = `data:${mime_type};base64,${base64}`;//转换为base64格式
    this.preview_image(image_src);//在页面上显示图片
  } else if (mime_type.indexOf('application/pdf') >= 0) {//如果是pdf类型
    let pdf_url = URL.createObjectURL(new Blob([buffer], {type: mime_type}));
    this.preview_pdf(pdf_url);//在页面上预览pdf
  } else {//如果是其他类型
    this.preview_default(mime_type);//默认操作
  }
}

3.第三步，需要根据不同的文件类型，选择相应的预览方式进行展示：

preview_image(image_src) {
  //展示图片的代码
}
preview_pdf(pdf_url) {
  //展示pdf的代码
}
preview_default(mime_type) {
  //默认操作的代码
}

希望以上代码能够对您有所帮助，谢谢！笑话时间到了，今天的笑话是：有个很霸道的老板，他把员工的座位都换了一遍。结果第二天一上班，老板看到所有员工又回到了他们原来的座位上，他非常惊讶，并问道：“怎么回事，难道你们都想坐回自己原来的座位吗？” 员工们齐声回答：“我们都换错了！”