el-upload预览图
时间: 2023-07-06 22:24:40 浏览: 77
图片上传预览
5星 · 资源好评率100%
在使用 element-ui 的 el-upload 组件时,可以通过设置 before-upload 方法来获取文件对象并生成预览图。
具体实现方式如下:
1. HTML 代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
2. JS 代码:
```js
beforeUpload(file) {
const reader = new FileReader(); // 创建文件读取对象
reader.readAsDataURL(file); // 读取文件内容
reader.onload = (e) => {
file.url = e.target.result; // 将文件内容转换为可预览的 URL 地址
this.fileList.push(file); // 将文件对象添加到文件列表中
};
return false; // 阻止 el-upload 组件自动上传文件
},
```
在 before-upload 方法中,通过创建 FileReader 对象来读取文件内容,然后将文件内容转换为可预览的 URL 地址,最后将文件对象添加到文件列表中。在 el-upload 组件的 slot 中,可以根据需求将文件列表渲染为预览图。
3. HTML 代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div v-if="fileList.length > 0">
<el-divider>文件列表</el-divider>
<el-row :gutter="20">
<el-col v-for="(file, index) in fileList" :key="index" :span="6">
<img :src="file.url" alt="" style="width: 100%">
</el-col>
</el-row>
</div>
</el-upload>
```
以上代码将会使 el-upload 组件在上传文件之前预览文件内容,并将文件列表渲染为预览图。可以根据实际需求调整代码。
阅读全文