どのように枢機卿と曇りに直接API呼び出しを行うには？

Question

私はこれを腋窩で解明しようとしています。私はスーパーエージェントとの直接API呼び出しを行いましたが、今ではAxiosでどのように使用するかを知りたいので、残りのプロジェクトはAxiosで行います。私は曇り反応があることを知っていますが、これは私がそれを行うのが好きな方法です。 ここまで私がこれまで持っていたことがあります。

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