有时得到：无法在 'FileReader' 上执行 'readAsDataURL'：参数 1 不是 'Blob' 类型

Question

所以我正在处理我的图像上传组件，以将个人资料图像作为 base64 字符串上传到 Rails API 后端。到目前为止一切正常，但有时我会收到以下错误：

'无法在 'FileReader' 上执行 'readAsDataURL'：参数 1 不是 'Blob' 类型。'

这是我的代码：

Javascript函数select并对图像进行编码

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 语句中。

Answer 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 分支中你可以对发生 cancel/close 的情况做一些处理

有时得到：无法在 'FileReader' 上执行 'readAsDataURL'：参数 1 不是 'Blob' 类型

Sometimes getting: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

javascript

base64

vue.js

nuxt.js