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

【问题标题】：Nuxt.js - How to upload image to cloudinary?Nuxt.js - 如何将图像上传到 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]

标签： vue.js nuxt.js cloudinary

【解决方案1】：

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

【讨论】：