如何使用 axios 對 cloudinary 進行直接 api 調用？

Question

我正在嘗試用 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=${uploadPreset}secret`;

    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;

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

Answer 2

這是我嘗試上傳頭像時的項目的一部分。 我已在 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) {}
    };