elementui upload文件预览

ElementUI是一套基于Vue.js的UI组件库，其中包含了一个Upload（上传）组件，可以实现文件上传功能，并且支持文件预览。

在ElementUI中，使用Upload组件进行文件上传和预览的步骤如下：

1. 引入ElementUI库和样式文件：

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';

2. 注册Upload组件：

   Vue.use(ElementUI);

3. 在Vue组件中使用Upload组件：

   <template>
     <div>
       <el-upload
         action="/upload"
         :on-success="handleSuccess"
         :before-upload="beforeUpload"
         :file-list="fileList"
         list-type="picture-card"
         :auto-upload="false"
       >
         <i class="el-icon-plus"></i>
       </el-upload>
     </div>
   </template>

4. 在Vue组件的methods中定义相关方法：

   methods: {
     handleSuccess(response, file, fileList) {
       // 上传成功后的回调函数
     },
     beforeUpload(file) {
       // 文件上传前的校验逻辑
     }
   }

5. 在Vue组件的data中定义fileList数组，用于存储已上传的文件列表：

   data() {
     return {
       fileList: []
     };
   }

通过以上步骤，你可以实现一个基本的文件上传和预览功能。当用户选择文件后，文件会被添加到fileList数组中，并且可以通过handleSuccess方法获取上传成功后的响应数据。同时，你可以在beforeUpload方法中对文件进行校验，例如限制文件类型、大小等。