vue 上传多文件转base64封装成多个对象,上传前删除文件同时更新封装的对象
时间: 2024-01-15 08:05:40 浏览: 71
好的,我理解了你的问题。首先,为了实现上传多个文件并转换成base64格式的封装对象,可以使用如下的代码:
```javascript
// 上传文件并转换为base64格式
function uploadFiles(files) {
const promises = []
for (let i = 0; i < files.length; i++) {
promises.push(new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(files[i])
reader.onload = () => resolve({
name: files[i].name,
base64: reader.result
})
reader.onerror = error => reject(error)
}))
}
return Promise.all(promises)
}
// 调用上传方法并更新对象,删除文件
async function handleFileUpload(event) {
const files = event.target.files
const uploadedFiles = await uploadFiles(files)
// 更新对象
this.uploadedFiles = this.uploadedFiles.concat(uploadedFiles)
// 删除文件
event.target.value = ''
}
```
在这段代码中,首先我们定义了一个 `uploadFiles` 函数,它接收一个文件列表作为参数,将文件列表中的每个文件都转换成base64格式,并且封装成一个对象,该对象包含文件名和base64字符串。我们使用 `FileReader` 对象来读取文件并将其转换成base64格式。
然后,我们调用 `Promise.all` 方法,将所有文件的转换操作封装成Promise对象,并且使用Promise.all方法来等待所有操作完成。在Promise.all方法返回之后,我们得到了一个包含所有文件对象的数组。
接下来,在处理文件上传事件时,我们调用了 `uploadFiles` 函数,并且将返回的对象列表更新到 `uploadedFiles` 数组中。最后,我们删除了文件输入框中的文件,以便用户可以选择不同的文件。
希望这个回答能够解决你的问题,如果你有任何疑问,请随时问我。
阅读全文