el-upload转blob
时间: 2023-10-27 14:26:56 浏览: 149
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
5星 · 资源好评率100%
要将 el-upload 中的文件转换为 Blob 对象,可以使用以下步骤:
1. 获取上传的文件对象。在 el-upload 中,你可以通过监听 upload-success 事件来获取上传成功的文件对象。例如,你可以在 upload-success 事件处理程序中使用 `event.file` 来获取文件对象。
2. 使用 FileReader 对象将文件转换为 Blob。你可以创建一个新的 FileReader 对象,然后调用其 `readAsArrayBuffer` 方法来读取文件数据。在读取完成后,可以通过 `event.target.result` 获取到读取的数据。最后,使用 `new Blob([data])` 来创建一个 Blob 对象。
以下是一个示例代码:
```html
<template>
<el-upload
action="/your-upload-url"
:on-success="handleUploadSuccess"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
// 获取上传成功的文件对象
const uploadedFile = fileList.find(item => item.uid === file.uid);
// 转换为 Blob 对象
const reader = new FileReader();
reader.onloadend = () => {
const data = new Blob([reader.result]);
// 在这里可以使用转换后的 Blob 对象进行操作
console.log(data);
};
reader.readAsArrayBuffer(uploadedFile.raw);
},
},
};
</script>
```
请确保在实际使用中替换掉 `/your-upload-url` 为你的上传接口 URL。同时,你也可以根据需要调整其他 el-upload 的配置项。
阅读全文