react-native - 使用 fetch blob 和图像选择器对本机上传视频做出反应

Question

使用反应原生图像选择器获取路径视频文件：

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

使用带有包装的本机获取 blob 发送文件：

     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 : 'example@example.com',
     tel : '12345678'
            })},
        ]).then((resp) => {
            console.log(resp)
        }).catch((err) => {
            console.log(err)
        })

不返回服务器中的视频数据：

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

avator-foo 是空的。为什么？

Answer 1

您的代码的三个问题...

1. 文件格式应为 mp4，并且您在文件名中提供扩展名 .png。
2. 包装uri而不是路径。
3. 无需在有效负载中指定类型。

检查下面给出的示例

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