2017-01-26 10 views
18

私は何かをカールすると、それが正常に動作します:どのように反応してAxiosでmultipartを設定しますか?

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

これは何らかの理由で機能しません。

+0

正確なエラーは何ですか?サーバーから特定の応答コードを取得しますか?また、フィドラーイベントログを投稿すると役立つ可能性があります。 – hazardous

答えて

11

は、私は、ファイル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を使用してアップロード反応はどうすればよいのです(少なくともそれは本当にaxios問題であるかどうかをテストするために)request-promiseをしようと考える

4

あなたは、英数字データを送信する場合、すべての 'Content-Typeの' を削除しようとするあなたは、英数字以外のデータを送信する場合

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

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

を変更してみてください。それはまだ動作しない場合は、

ここ
関連する問題