手机端vue在线预览文件流

手机端Vue在线预览文件流的实现可以通过使用FileReader API来完成，以下是实现步骤：
1. 读取文件：使用FileReader的readAsDataURL方法读取文件，该方法会返回一个base64编码的数据URL。
2. 将数据URL传递给组件进行展示：可以使用img标签来展示图片，video标签来展示视频，或者iframe标签来展示PDF等文档。
3. 对于音频等其他类型的文件，可以通过调用浏览器默认的播放器进行播放。

以下是一个简单的实现示例：

<template>
  <div>
    <img v-if="isImage" :src="fileUrl" />
    <video v-else-if="isVideo" :src="fileUrl" controls />
    <iframe v-else-if="isPdf" :src="fileUrl" />
    <audio v-else-if="isAudio" :src="fileUrl" controls />
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: "",
      fileType: ""
    };
  },
  computed: {
    isImage() {
      return this.fileType.startsWith("image/");
    },
    isVideo() {
      return this.fileType.startsWith("video/");
    },
    isPdf() {
      return this.fileType === "application/pdf";
    },
    isAudio() {
      return this.fileType.startsWith("audio/");
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files;
      if (!file) return;

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = e => {
        this.fileUrl = e.target.result;
        this.fileType = file.type;
      };
    }
  }
};
</script>

<style scoped>
/* 样式自行定义 */
</style>