我如何设置多部分的公理与反应？

当我卷曲一些东西时，效果很好:

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

我怎样才能让它与公理一起工作呢? 如果有问题的话，我使用的是 response:

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

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

206629 次浏览
小开

If you are sending alphanumeric data try changing 

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

to

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

If you are sending non-alphanumeric data try to remove 'Content-Type' at all.

If it still does not work, consider trying request-promise (at least to test whether it is really axios problem or not)

小开
最佳答案

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 = '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

小开

ok. I tried the above two ways but it didnt work for me. After trial and error i came to know that actually the file was not getting saved in 'this.state.file' variable.

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

here fileUpload is a different js file which accepts two params like this

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

}

don't forget to bind method in the constructor. Let me know if you need more help in this.


提交答案