vue2上传pdf并且可以预览

Vue2中，为了实现文件上传包括PDF，并提供预览功能，通常会结合一些前端库如`vue-file-loader`、`vue-dropzone`或`axios`以及后端支持，比如处理PDF的服务器API。以下是一个简单的步骤：

1. 安装依赖：
- 使用`vue-file-loader`处理PDF文件的预览，通过npm安装：

     npm install vue-file-loader axios

2. 配置`vue.config.js`（如果是Vue CLI项目）:

   module.exports = {
     //...
     configureWebpack: config => {
       if (config.module && config.module.rules) {
         config.module.rules.push({
           test: /\.(pdf)$/,
           use: [
             'file-loader',
             { loader: 'vue-file-loader', options: { es6: true } },
           ],
         });
       }
     },
   };

3. 创建一个组件，例如`UploadPreview.vue`:

   <template>
     <div>
       <input type="file" @change="handleFileChange" accept=".pdf">
       <div v-if="previewUrl">
         <img :src="previewUrl" alt="PDF Preview" />
       </div>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         previewUrl: '',
       };
     },
     methods: {
       handleFileChange(e) {
         const file = e.target.files[0];
         if (file.type === 'application/pdf') {
           this.$http.post('/api/upload', file).then(res => {
             this.previewUrl = res.data.url;
           });
         } else {
           alert('Please select a PDF file.');
         }
       },
     },
   };
   </script>

4. 后端API应返回PDF的URL，用户可以选择发送到服务器并获取预览链接。