el-upload 如何查看pdf文件

el-upload是基于Element UI库开发的上传组件，它的作用是可以将文件上传至服务器。如果想要在浏览器中查看pdf文件，需要使用其他工具或插件。

一种方法是使用浏览器内置的PDF阅读器。在上传pdf文件后，可以在浏览器中直接打开它，浏览器会自动调用PDF阅读器进行预览。如果浏览器没有内置PDF阅读器，则可以安装Adobe Reader或其他PDF阅读器插件。

另一种方法是将pdf文件转换成图片格式，然后在浏览器中预览。这种方法需要用到pdf转换工具，比如Adobe Acrobat或其他在线转换工具。将pdf文件转换成图片后，可以在el-upload组件中添加一个链接来访问图片，然后在浏览器中预览图片即可。

无论是哪种方法，都需要安装相应的插件或使用在线转换工具，才能实现在浏览器中查看pdf文件。同时，还需要确保上传的pdf文件是可以公开访问的，如果设置了访问权限，则可能需要输入密码或登录信息才能访问。

相关问题

el-upload上传pdf文件

以下是使用Element UI中的el-upload组件上传pdf文件的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :accept="'application/pdf'"
    :limit="1"
    :on-exceed="handleExceed"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过1个</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isPDF = file.type === 'application/pdf';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPDF) {
        this.$message.error('上传文件只能是pdf格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
      }
      return isPDF && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传一个pdf文件!`);
    }
  }
};
</script>

在上述代码中，我们使用了Element UI中的el-upload组件来实现文件上传功能。其中，我们通过设置accept属性为'application/pdf'来限制只能上传pdf文件，通过设置limit属性为1来限制只能上传一个文件，通过设置show-file-list属性为false来隐藏文件列表。在beforeUpload方法中，我们对上传的文件进行了格式和大小的限制，如果不符合要求则会弹出错误提示。在handleChange方法中，我们可以获取到上传的文件信息。

el-upload上传pdf文件回显

el-upload 是一个基于 Element UI 的上传组件，可以用来上传各种类型的文件，包括 pdf 文件。要实现上传 pdf 文件并回显，可以按照以下步骤进行：

1. 在 el-upload 组件中设置 accept 属性为 'application/pdf'，表示只允许上传 pdf 文件。
2. 在上传成功后的回调函数中，获取到上传成功的文件对象，将其转换为 URL.createObjectURL(blob) 的形式，即可得到一个可用于回显的 URL。
3. 将得到的 URL 赋值给一个 img 标签的 src 属性，即可在页面上显示 pdf 文件。

以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :accept="'application/pdf'"
    :on-success="handleSuccess">
    <el-button slot="trigger">选取文件</el-button>
    <el-button slot="tip" type="primary">只能上传pdf文件</el-button>
  </el-upload>
  <div v-if="pdfUrl">
    <iframe :src="pdfUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    handleSuccess(response, file) {
      const blob = new Blob([file.raw], { type: 'application/pdf' })
      this.pdfUrl = URL.createObjectURL(blob)
    }
  }
}
</script>