Cloudinary - 通过直接调用 API 上传，缺少文件

Cloudinary - Uploading with a direct call to the API, Missing file

本文关键字：上传 文件 API 调用 Cloudinary      更新时间：2023-09-26

嗨，我正在尝试从 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，时间戳等，我需要发送图像，我需要将其发送到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。谢谢。

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

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

您可以随时使用这个称为 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";

如果你使用类似的东西 反应 那么这样做 . 

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

希望有帮助.

相关文章：