如何在Vue 2中使用Element UI的el-upload组件来实现PDF文件的上传功能？

在Vue 2中使用Element UI的`el-upload`组件来实现PDF文件上传，你可以按照以下步骤操作：

1. **安装依赖**:
首先，你需要在项目中安装Element UI库以及Vue CLI支持的`axios`或类似库用于发送HTTP请求，可以使用以下命令安装：

   npm install element-ui axios --save

2. **引入组件**:
在你的Vue组件中，需要导入`el-upload`、`axios`以及相关的样式：

   <template>
     <div>
       <el-upload
         :action="uploadUrl"
         :on-success="handleSuccess"
         :file-list="fileList"
         :auto-upload="false"  // 阻止默认的上传行为，我们需要自定义上传
       >
         <i class="el-icon-upload"></i> Click to upload
       </el-upload>
     </div>
   </template>

   <script>
   import { ElUpload } from 'element-ui';
   import axios from 'axios';

   export default {
     components: {
       ElUpload,
     },
     data() {
       return {
         uploadUrl: '', // 你的API URL
         fileList: [], // 初始化的文件列表
         formData: new FormData(), // 用于储存上传的数据
       };
     },
     methods: {
       handleSuccess(response) {
         console.log('上传成功', response);
         this.$emit('success', response); // 触发自定义事件处理上传成功的情况
       },
       handleFileUpload(file) {
         this.formData.append('file', file);
         axios.post(this.uploadUrl, this.formData, {
           headers: {'Content-Type': 'multipart/form-data'}
         })
         .then(res => {
           this.fileList.push({name: file.name, url: res.data.url}); // 将新上传的文件添加到列表中
         })
         .catch(error => console.error('上传失败', error));
       },
     }
   }
   </script>

3. **使用组件**:
然后，在模板中创建`<el-upload>`元素，并设置`handleFileUpload`作为点击事件的处理器，当用户选择文件后，会触发这个方法。

4. **监听事件**:
如果你需要在其他部分处理上传结果，可以在组件外部监听`success`事件，例如：

   mounted() {
     this.$on('success', (response) => {
       console.log('文件上传成功', response);
       // 这里做你的后续处理
     });
   },
   beforeDestroy() {
     this.$off('success');
   }