Nuxt.js

Question

我正在尝试从客户端将图像上传到 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 Image&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 '[]'"
}

有没有更好的上传图片的方法？

Answer 1

由于您将对象作为文件传递，而不仅仅是文件本身，因此您会收到此错误。该文件可以是现有文件的实际数据（字节数组缓冲区）、数据 URI（Base64 编码）、远程 FTP、HTTP 或 HTTPS URL。

Nuxt.js - 如何上传图片到cloudinary？

Nuxt.js - How to upload image to cloudinary?

cloudinary

vue.js