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

Posted 2023-02-22

【中文标题】Nuxt.js - 如何将图像上传到 cloudinary？

【英文标题】：Nuxt.js - How to upload image to cloudinary?

【发布时间】：2021-03-08 03:15:23

【问题描述】：

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

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

【问题讨论】：

当您发送到 cloudinary 时，能否在网络选项卡中记录您的请求负载？

` FormData Object upload_preset: "jj4vb6nq" ` 即使我附加了信息，formData 对象似乎也是空的。

你能记录下this.photo = this.$refs.image.files[0];

this.photo 的日志是 File name: "Screenshot from 2020-11-05 16-12-45.png", lastModified: 1604590494854, webkitRelativePath: "", size: 291860, type : "图片/png"

尝试更改此行this.photo = image.target.files[0]

【参考方案1】：

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