有时会得到：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型答案

【问题标题】：Sometimes getting: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'有时会得到：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型
【发布时间】：2021-01-01 22:51:08
【问题描述】：

所以我正在处理我的 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>

这种错误可能只发生在我对文件进行小幅更改后热重新加载页面时。

编辑

错误已解决。在您选择一张图片并想选择另一张图片后，您不能按取消，因为这会触发错误，因为它会更改为“未选择文件”。因此，您需要将 reader.readAsDataURL 放在 If 语句中。

【问题讨论】：

如果将其转换为base64格式，则不需要将其作为文件对象传递，可以将其作为字符串发送而失败的原因也是因为您正在格式化它
出错时fileObject的值是多少？
@ArjunKanungo 好吧，它是一个字符串，对吧？这是我的输出：i.gyazo.com/3434721c95adf0beba348ec52c3aea0c.png
@LajosArpad 我知道是什么触发了这个错误。当我在选择图像后打开文件选择器时，当我取消/关闭文件选择器而不是选择不同的图片时会出现此错误。你知道我应该改变什么来解决这个问题吗？

标签： javascript vue.js base64 nuxt.js

【解决方案1】：

您需要检查您作为输入的值是否为 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
  }
},

在 else 分支中，您可以对发生取消/关闭的情况进行一些处理

【讨论】：