Làm cách nào để đặt multipart trong các trục với phản ứng?

Question

Khi tôi cuộn tròn một cái gì đó, nó hoạt động tốt:

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

Làm thế nào để có được điều này để làm việc đúng với Axios? Tôi đang sử dụng phản ứng nếu điều đó quan trọng:

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

Điều này không có lý do.

Answer 1

Đây là cách tôi làm tập tin tải lên trong phản ứng sử dụng 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

Answer 2

Nếu bạn đang gửi dữ liệu chữ và số hãy thử thay đổi

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

để

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

Nếu bạn đang gửi dữ liệu không chữ và số cố gắng để xóa 'Content-Type' chút nào.

Nếu nó vẫn không hoạt động, xem xét thử request-promise (ít nhất là để kiểm tra xem nó thực sự là Axios vấn đề hay không)