如何在 axios 中使用 react 设置 multipart？答案

【问题标题】：How do I set multipart in axios with react?如何在 axios 中使用 react 设置 multipart？
【发布时间】：2017-06-12 05:48:02
【问题描述】：

当我卷曲某些东西时，它工作正常：

curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  http://example.com/upload

如何让它与 axios 一起正常工作？如果这很重要，我正在使用反应：

uploadURL (url) {
  return axios.post({
    url: 'http://example.com/upload',
    data: {
      url: url
    },
    headers: {
      'x-device-id': 'stuff',
      'Content-Type': 'multipart/form-data'
    }
  })
  .then((response) => response.data)
}

由于某种原因，这不起作用。

【问题讨论】：

这里的确切错误是什么？您是否从服务器获得特定的响应代码？还发布提琴手事件日志可能会有所帮助。

标签： javascript reactjs multipartform-data axios

【解决方案1】：

这是我如何使用 axios 在 react 中上传文件

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

Source

【讨论】：

这种情况下如何发送多个文件？
为什么需要指定multipart/form-data？它应该已经内置在FormData 中。来源(github.com/axios/axios/issues/318#issuecomment-218948420)
您可以在实例化FormData 对象时将表单元素作为参数传递，这非常有用，因为它使用表单的键及其值填充对象。

【解决方案2】：

好的。我尝试了上述两种方法，但它对我不起作用。经过反复试验，我知道实际上该文件没有保存在“this.state.file”变量中。

fileUpload = (e) => {
    let data = e.target.files
    if(e.target.files[0]!=null){
        this.props.UserAction.fileUpload(data[0], this.fallBackMethod)
    }
}

这里的fileUpload是一个不同的js文件，它接受两个这样的参数

export default (file , callback) => {
const formData = new FormData();
formData.append('fileUpload', file);

return dispatch => {
    axios.put(BaseUrl.RestUrl + "ur/url", formData)
        .then(response => {
            callback(response.data);
        }).catch(error => {
         console.log("*****  "+error)
    });
}

}

不要忘记在构造函数中绑定方法。如果您需要更多帮助，请告诉我。

【讨论】：

【解决方案3】：

如果您发送的是字母数字数据，请尝试更改

'Content-Type': 'multipart/form-data'

到

'Content-Type': 'application/x-www-form-urlencoded'

如果您发送非字母数字数据，请尝试完全删除“Content-Type”。

如果还是不行，考虑试试request-promise（至少测试一下是不是真的是axios问题）

【讨论】：

字母数字数据是什么意思？