Cloudinary - 直接调用 API 上传，缺少文件答案

【问题标题】：Cloudinary - Uploading with a direct call to the API, Missing fileCloudinary - 直接调用 API 上传，缺少文件
【发布时间】：2016-05-14 06:00:29
【问题描述】：

您好，我正在尝试使用 React JS 中的 Cloudinary，因此我使用的是从浏览器直接调用 API。我有服务器返回我 api_key 等...

我正在使用 readAsDataURL() 将我的文件更改为 base64

    let file = e.target.files[0];
    let self = this;

    let typeString = this.tellType(file);

    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(){
      self.sendMedia(typeString, this.result)
    }

然后我从客户端 nodejs 服务器获取 api_key、timestamp 等，我需要发送图像并将其发送到 cloudinary。

    let request = new XMLHttpRequest();
    let params = {
      api_key: result.upload_info.api_key,
      timestamp: result.upload_info.timestamp,
      signature: result.upload_info.signature,
      public_id: result.upload_info.public_id,
      file: file
    };
    console.log('params',params);

    request.open('POST', `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`, true);

    request.onreadystatechange = function() {
      console.log('its back', request)
    };

    request.send(params);

然后我收到 403（错误请求）

responseText: "{"error":{"message":"Missing required parameter - file"}}"

我第一次想到我的文件格式错误，但是cloudniary允许base64。谢谢。

【问题讨论】：

Cloudinary 完全支持使用 base64 上传。虽然看起来“文件”属性没有被正确传递。 file: file 里面是什么？您是否将this.result 作为“文件”的值发送？

标签： javascript base64 cloudinary

【解决方案1】：

我遇到了同样的问题。碰巧您必须将参数作为 JSON 发送。

【讨论】：

【解决方案2】：

    var reader = new FileReader();
    reader.onload = function (e) {
    //next line separates url from data
    var form = new FormData();
    form.append("file",e.target.result);
    form.append("upload_preset", "preset_key");

    currentRequest = $.ajax({
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
          if (evt.lengthComputable) {
            var progress = parseInt(evt.loaded / evt.total * 100, 10);
            console.log(progress)
          }
        }, false);
        return xhr;
      },
      async: true,
      crossDomain: true,
      url: 'https://api.cloudinary.com/v1_1/cloud_name/image/upload',
      type: "POST",
      headers: {
        "cache-control": "no-cache"
      },
      processData: false,
      contentType: false,
      mimeType: "multipart/form-data",
      data: form,
      beforeSend: function () {
        if (currentRequest != null) {
          currentRequest.abort();
        }
      },
      success: function (data) {
        data=JSON.parse(data)
        console.log(data['url'])
      },
      error: function (jqXHR, textStatus) {
        console.log(jqXHR)
      }
    });
  };
  reader.readAsDataURL(this.files[0]);

【讨论】：

【解决方案3】：

您始终可以使用这个名为 cloudinary-direct 的包。

const Cloud = require('cloudniary-direct');
Cloud.cloudName = "your_cloud_name_from_cloudinary";
Cloud.api_key = "your_api_key_from_cloudinary";
Cloud.api_secret = "your_api_secret_from_cloudinary";
Cloud.upload_preset = "your_upload_preset_from_cloudinary";

如果您使用 react 之类的东西，请执行此操作。

import React from 'react';
import Cloud from 'cloudniary-direct';
import DropZone from 'react-dropzone';

class Sender extends React.Component{
  constructor(){
    super();
    this.handler = this.handler.bind(this);
  }
  handler(file){
    Cloud.cloudName = "your_cloud_name_from_cloudinary";
    Cloud.api_key = "your_api_key_from_cloudinary";
    Cloud.api_secret = "your_api_secret_from_cloudinary";
    Cloud.upload_preset = "your_upload_preset_from_cloudinary";
    Cloud.imageUploader(file[0], (resp)=> {
      const imageURL = resp.secure_url;
      // Save that url in the database
    })
  }
  render(){
    return (
      <div>
        <DropZone onDrop={this.handler} />
      </div>
    )
  }
}

希望对你有帮助。

【讨论】：