Question

您好我正在尝试使用来自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"}}"

我第一次认为我的文件格式错误，但是cloudn允许使用base64。谢谢。

Answer 1

我遇到了同样的问题。碰巧你必须把params作为JSON发送。

Answer 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]);

Answer 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>
    )
  }
}

希望它有所帮助。

Cloudinary - 通过直接调用API，丢失文件进行上传

3 个答案: