如何使用 axios 对 cloudinary 进行直接 api 调用？

Posted 2023-03-25

【中文标题】如何使用 axios 对 cloudinary 进行直接 api 调用？

【英文标题】：How to make direct api call to cloudinary with axios?

【发布时间】：2017-12-22 06:29:45

【问题描述】：

我正在尝试用 axios 解决这个问题。我已经使用 superagent 进行了直接 api 调用，现在想知道如何使用 axios，因为我的项目的其余部分是使用 axios。我知道有 cloudinary-react，但这是我更喜欢这样做的方式。 这是我到目前为止所拥有的。

import React,  Component  from 'react';
import Dropzone from 'react-dropzone';
import sha1 from 'sha1';
import superagent from 'superagent';
import axios from 'axios';

class Images extends Component 
  uploadFile(files) 
    console.log('uploadFile: ');
    const image = files[0];

    const cloudName = 'tbaustin';
    const url = `https://api.cloudinary.com/v1_1/$cloudName/image/upload`;

    const timestamp = Date.now()/1000;
    const uploadPreset = 'cnh7rzwp';

    const paramsStr = `timestamp=$timestamp&upload_preset=$uploadPresetsecret`;

    const signature = sha1(paramsStr);
    const params = 
      'api_key': 'api_key',
      'timestamp': timestamp,
      'upload_preset': uploadPreset,
      'signature': signature
    

    let uploadRequest = superagent.post(url)
    uploadRequest.attach('file', image);

    Object.keys(params).forEach((key) => 
      uploadRequest.field(key, params[key]);
    );

    uploadRequest.end((err, res) => 
      if(err) 
        alert(err);
        return
      

      console.log('UPLOAD COMLETE: '+JSON.stringify(res.body));
    );



//AXIOS CONTENT HERE
    // let request = axios.post(url, file: image);
    // request.then((response) => 
    //   Object.keys(params).forEach((key) => 
    //     uploadRequest.field(key, params[key]);
    //   );
    //   console.log('UPLOAD COMPLETE: '+JSON.stringify(response.body));
    // ).catch((err) =>  alert(err); );
  

  render() 
    return (
      <div>
        <Dropzone onDrop=this.uploadFile.bind(this)/>
      </div>
    )
  


export default Images;

【问题讨论】：

首先，api 密钥和图像上传逻辑应该驻留在您的后端服务器上。在我的情况下，它是 Node js。您将所有密钥保留在服务器端，然后通过 axios 调用您的节点服务器并告诉它要上传的文件，然后节点调用 cloudinary api 来上传资产。 cloudinary.com/documentation/…

我明白这不是正确的做法，我只是想知道热以制作正确的 axios 代码来完成这项工作，仅此而已......

所以这里的正确方法是使用 axios 调用您的节点 api，该 api 将负责上传文件。这将是一个包含所有表单数据的 post call，现在一个表单可以包含一个文件或任何文本字段。

可以分享一下错误信息吗？

@Maor.G 这是一个错误的请求。我没有正确附加字段或文件是我最好的猜测。

【参考方案1】：

这对我有用。

    let formData = new FormData();
    formData.append("api_key",'');
    formData.append("file", image);
    formData.append("public_id", "sample_image");
    formData.append("timestamp", timeStamp);
    formData.append("upload_preset", uploadPreset);

    axios
    .post(url, formData)
    .then((result) => 
        console.log(result);
    )
    .catch((err) => 
        console.log(err);
    )    

【讨论】：

你知道如何在那个 cloudinary url 上执行 axios 删除吗？如何构建云名称、api 密钥和公共 id？

【参考方案2】：

这是我尝试上传头像时项目的一部分。我已将上传预设设置为 unsigned on cloudinary。

    const uploadPhotoHandler = async (e) => 
         const file = e.target.files[0];
         const formData = new FormData();
         formData.append("file", file);
         formData.append("upload_preset", "pa*****");

         try 
               setPictureProfile("./assets/img/giphy.gif");
               const res = await axios.post("https://api.cloudinary.com/v1_1/$cloud_name/upload", formData);
               console.log(res.data.url);
               setPictureProfile(res.data.url);
          catch (error) 
    ;