react native upload video with fetch blob and imag

问题:

get path video file with react native image picker:

{path: "/storage/emulated/0/DCIM/Camera/VID_20171123_122202.mp4", uri: 
"content://media/external/video/media/50"}

send file with react native fetch blob with wrap:

     let url=CounterStore.base_url+'upload/video?
    &api_token='+CounterStore.api_token;
        RNFetchBlob.fetch('POST', url, {
            'Content-Type' : 'multipart/form-data',
        }, [

    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', 
    type:'image/foo', data: RNFetchBlob.wrap(this.state.data.path)},
    // elements without property `filename` will be sent as plain text
   { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
     mail : '[e-mail]',
     tel : '12345678'
            })},
        ]).then((resp) => {
            console.log(resp)
        }).catch((err) => {
            console.log(err)
        })

not return video data in server:

`FetchBlobResponse {data: "{"name":"user","info":"{\"mail\":\"example@example…p8njbIxpJGLDA8fte6QEgbWQOVU3Vhf","avatar-foo":{}}", taskId: "8f`vfiutibvhss2jt8eh62", type: "utf8", respInfo: {…}, info: ƒ, …}

avator-foo is empty.why?

回答1:

Three Problems with your code ...

1. file format should be mp4 and your are giving extension .png in filename.
2. wrap uri not path.
3. no need to specify type in payload.

check example given below

  ImagePicker.showImagePicker(options, (response) => {

            if (response.didCancel) {
            }
            else if (response.error) {
            }
            else if (response.customButton) {
            }
            else {
                let source = { uri: response.uri }
                RNFetchBlob.fetch('POST', URL, {
                    // dropbox upload headers
                    ...
                    'Content-Type': 'multipart/form-data',
                    // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
                    // Or simply wrap the file path with RNFetchBlob.wrap().
                }, [
                        // element with property `filename` will be transformed into `file` in form data

                        { name: 'file', filename: 'vid.mp4', data: RNFetchBlob.wrap(response.uri) },
                        // custom content type

                    ]).then((res) => {

                    })
                    .catch((err) => {
                        // error handling ..
                    })
                this.setState({
                    avatarSource: source
                });
               ....
            }
        });