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

本文介绍了如何在axios中设置multipart并做出反应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当我卷曲时，它运作正常：

When I curl something, it works fine:

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

如何使用axios工作？如果重要，我正在使用反应：

How do I get this to work right with axios? I'm using react if that matters:

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

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

This doesn't work for some reason.

推荐答案

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

Here's how I do file upload in react using 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 = 'example/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

来源