Блог

Я пытаюсь загрузить изображение в cloudinary со стороны клиента. Я создал данные формы и пытаюсь передать их, но они возвращаются пустыми.

HTML:

 <div class="my-2">
  <input
    id="image"
    ref="image"
    type="file"
    class="inputfile img"
    name="image"
    aria-describedby="imageFile"
    accept="image/*"
    @change="addImage"
  />
  <label for="image">
    <span>{{ fileName }}</span>
    <strong><i class="fas fa-upload"></i> Choose an Imageamp;hellip;</strong>
  </label>
</div>
 

Вызывается функция addImage:

     async addImage(image) {
      try {
        this.$emit('input', image.target.files[0]);

        this.photo = this.$refs.image.files[0];
        this.photoName = this.photo.name;

        const formData = new FormData();
        formData.append('file', this.photo, this.photo.name);

        const upload = await this.$cloudinary.upload(formData, {
          upload_preset: 'jj4vb6nq',
        });

      } catch (e) {
        console.error(e.message);
        // this.error = e.message;
      }
    },
 

Когда он пытается загрузить, я получаю следующую ошибку:

 {
  "message": "Invalid file parameter. Make sure your file parameter does not include '[]'"
}
 

Есть ли лучший способ загрузить изображение?

Поскольку вы передаете объект как файл, а не только сам файл, вы получаете эту ошибку. Файл может содержать фактические данные (буфер массива байтов), URI данных (кодировка Base64), удаленный FTP, HTTP или HTTPS URL существующего файла.