vue中el-upload怎么实现文件上传并可以打开文件

在 Vue 中使用 `el-upload` 组件实现文件上传非常简单，可以通过以下步骤实现：

1. 安装 `element-ui` 组件库，可以通过 npm 或 yarn 安装：

   npm install element-ui --save

或

   yarn add element-ui

2. 在需要使用 `el-upload` 的组件中引入组件：

   import { Upload } from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   export default {
     components: {
       Upload
     }
   }

3. 在模板中使用 `el-upload` 组件，设置 `action` 属性为上传文件的后台接口地址，设置 `on-success` 属性为上传成功后的回调函数，将上传成功后的数据保存到组件的 `fileList` 属性中，代码如下：

   <template>
     <el-upload
       class="upload-demo"
       action="/upload"
       :file-list="fileList"
       :on-success="handleSuccess"
     >
       <el-button slot="trigger" type="primary">选取文件</el-button>
       <el-button style="margin-left: 10px;" type="success">开始上传</el-button>
     </el-upload>
   </template>
   
   <script>
   export default {
     data() {
       return {
         fileList: []
       };
     },
     methods: {
       handleSuccess(response, file, fileList) {
         this.fileList = fileList;
         // 在这里可以根据文件类型打开文件
       }
     }
   };
   </script>

4. 在 `handleSuccess` 回调函数中，可以根据上传的文件类型打开文件。例如，如果上传的是一个图片文件，可以使用以下代码打开它：

   handleSuccess(response, file, fileList) {
     this.fileList = fileList;
     if (file.type.indexOf('image/') === 0) {
       const url = URL.createObjectURL(file.raw);
       window.open(url);
     }
   }

如果上传的是一个文本文件，可以使用以下代码打开它：

   handleSuccess(response, file, fileList) {
     this.fileList = fileList;
     if (file.type.indexOf('text/') === 0) {
       const reader = new FileReader();
       reader.onload = function(e) {
         window.open(e.target.result);
       };
       reader.readAsDataURL(file.raw);
     }
   }

如果上传的是其他类型的文件，可以根据文件类型使用相应的软件或工具打开它。