有时在‘FileReader’上执行'readAsDataURL‘失败:参数1不是'Blob’类型的
有时在‘FileReader’上执行'readAsDataURL‘失败:参数1不是'Blob’类型的
提问于 2021-01-01 12:47:01
因此，我正在开发imageupload组件，以便将概要文件图像作为base64字符串上载到Rails API后端。到目前为止，一切都很好，但有时我会遇到以下错误：
‘在’FileReader‘上执行'readAsDataURL’的错误:参数1不是‘Blob’类型的。
这是我的密码：
Javascript函数用于选择和编码图像
selectImage(e) {
const selectedImage = e.target.files[0] // get image
this.createBase64Image(selectedImage)
},
createBase64Image(fileObject) {
const reader = new FileReader()
reader.onload = (e) => {
this.form.profile_image = e.target.result
}
reader.readAsDataURL(fileObject)
}HTML
<div class="flex items-center">
<div
class="object-cover object-center overflow-hidden bg-gray-100 rounded-full w-14 h-14"
>
<img style="" :src="form.profile_image" alt="" />
<svg
v-if="form.profile_image == null"
class="w-full h-full text-gray-300"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
</div>
<input
type="file"
accept="image/*"
class="custom-input-button"
@change="selectImage"
/>
</div>一种可能的情况是，此错误仅在文件中发生小更改后热重新加载页面时才会发生。
编辑
解决了这一错误。在您选择一张图片并想要选择另一张图片后，您不能按cancel，因为这将触发错误，因为它将更改为“没有选择的文件”。因此，您需要将reader.readAsDataURL放在If语句中。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-01 14:51:08
您需要检查作为输入的值是否为blob：
selectImage(e) {
const selectedImage = e.target.files[0]; // get image
if (selectedImage instanceof Blob) {
this.createBase64Image(selectedImage);
} else {
//not a blob, cancel/close happened
}
},在其他分支中，当发生cancel/close时，您可以对这种情况进行一些处理。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65529794
复制相关文章
相似问题
腾讯云开发者
