时间戳

首页 > 解决方案 > 有时会：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

javascript - 有时会：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

问题描述

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

标签： javascriptvue.jsbase64nuxt.js

解决方案

您需要检查作为输入的值是否为 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 分支中，您可以对发生取消/关闭的情况进行一些处理

推荐阅读