当前位置:  开发笔记 > 编程语言 > 正文

如何在axios中设置multipart并做出反应?

如何解决《如何在axios中设置multipart并做出反应?》经验,为你挑选了2个好方法。

当我卷曲的东西,它工作正常:

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

由于某种原因,这不起作用.



1> 小智..:

以下是我使用axios进行文件上传的方法

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 (
      

File Upload

) } } export default SimpleReactFileUpload

资源


为什么需要指定`multipart / form-data`?它应该已经内置在FormData中。来源(https://github.com/axios/axios/issues/318#issuecomment-218948420)

2> Shota..:

如果您要发送字母数字数据,请尝试更改

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

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

如果您要发送非字母数字数据,请尝试删除"内容类型".

如果它仍然不起作用,请考虑尝试请求 - 承诺(至少测试它是否真的是axios问题)

推荐阅读
小白也坚强_177
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有