Иногда получение: не удалось выполнить 'readAsDataURL' в 'FileReader': параметр 1 не имеет типа 'Blob'

#javascript #vue.js #base64 #nuxt.js

Вопрос:

Итак, я работаю над своим компонентом imageupload, чтобы загрузить изображение профиля в виде строки base64 в серверную часть Rails API. Пока все работает нормально, но иногда я получаю следующую ошибку:

‘Не удалось выполнить ‘readAsDataURL’ в ‘FileReader’: параметр 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.

1. Если вы конвертируете его в формат base64, вам не нужно передавать его как файловый объект, вы можете отправить его в виде строки, и причина сбоя также заключается в том, что вы его форматируете

2. Какое значение FileObject при возникновении ошибки?

3. @ArjunKanungo Ну, это строка, верно? Это мой вывод: i.gyazo.com/3434721c95adf0beba348ec52c3aea0c.png

4. @LajosArpad Я вижу, что вызывает эту ошибку. Когда я открываю средство выбора файлов после того, как я уже выбрал изображение, эта ошибка появляется, когда я отменяю / закрываю средство выбора файлов вместо выбора другого изображения. Есть ли у вас какие-либо идеи, что я должен изменить, чтобы исправить это?

Ответ №1:

Вам нужно проверить, является ли значение, которое вы вводите в качестве ввода, большим двоичным объектом:

 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 вы можете выполнить некоторую обработку для случая, когда произошла отмена / закрытие