时间戳

首页 > 解决方案 > 如何将以下 curl 调用转换为 nodejs axios？

node.js - 如何将以下 curl 调用转换为 nodejs axios？

问题描述

curl -F 'data=@./resourcesByFileId.png' -F 'props={"title":"resource title"}' http://localhost:27583/resources

 async create(fd: FormData) {
    const resp = await axios.post<ResourceGetRes>(
      ApiUtil.baseUrl('/resources'),
      fd,
      {
        headers: fd.getHeaders(),
      },
    )
    return resp.data
  }
  
    const fd = new FormData()
    const path = resolve(__dirname, '../resource/resourcesByFileId.png')
    console.log('test create: ', path)
    fd.append('props', JSON.stringify({ title: '图片标题' }))
    fd.append('data', createReadStream(path))
    await resourceApi.create(fd)

我用 form-data 和 axios 试了一下，结果爆炸了

原始问题https://discourse.joplinapp.org/t/how-to-use-joplin-api-resources-id-file/11333/3?u=rxliuli

我尝试了 fetch 并立即成功。下面这两个有区别吗？

  describe('diff fetch and axios', () => {
    function getFormData() {
      const fd = new FormData()
      const path = resolve(__dirname, '../resource/resourcesByFileId.png')
      const title = 'image title'
      fd.append('props', JSON.stringify({ title: title }))
      fd.append('data', createReadStream(path))
      return fd
    }

    it('test create by fetch', async () => {
      const fd = getFormData()
      const resp = await fetch(ApiUtil.baseUrl('/resources'), {
        method: 'post',
        body: fd,
      })
      const json = await resp.json()
      console.log('json: ', json)
    })
    it.skip('test create by axios', async () => {
      const fd = getFormData()
      const resp = await axios.post(ApiUtil.baseUrl('/resources'), fd, {
        headers: fd.getHeaders(),
      })
      console.log('resp.data: ', resp.data)
    })
  })

标签： node.jsaxios

解决方案

            import React from 'react'
            import axios, { post } from 'axios';

            class SimpleReactFileUpload extends React.Component {

              constructor(props) {
                super(props);
                this.state ={
                  file:null
                }
                this.onFormSubmit = this.onFormSubmit.bind(this)
                this.onChange = this.onChange.bind(this)
                this.fileUpload = this.fileUpload.bind(this)
              }

              onFormSubmit(e){
                e.preventDefault() // Stop form submit
                this.fileUpload(this.state.file).then((response)=>{
                  console.log(response.data);
                })
              }

              onChange(e) {
                this.setState({file:e.target.files[0]})
              }

              fileUpload(file){
                const url = 'http://example.com/file-upload';
                const formData = new FormData();
                formData.append('file',file)
                const config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                }
                return  post(url, formData,config)
              }

              render() {
                return (
                  <form onSubmit={this.onFormSubmit}>
                    <h1>File Upload</h1>
                    <input type="file" onChange={this.onChange} />
                    <button type="submit">Upload</button>
                  </form>
               )
              }
            }



            export default SimpleReactFileUpload

推荐阅读