使用fetch blob和image picker对本机上传视频做出反应

时间:2017-11-23 09:10:42

标签: react-native react-native-fetch-blob

获取具有反应原生图像选择器的路径视频文件:

ui.draggable.clone().find("i").remove();

使用wrap:

发送带有react native fetch blob的文件
{path: "/storage/emulated/0/DCIM/Camera/VID_20171123_122202.mp4", uri: 
"content://media/external/video/media/50"}

不在服务器中返回视频数据:

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

avator-foo是空的。为什么?

1 个答案:

答案 0 :(得分:1)

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

  1. 文件格式应为mp4,您的文件名为.png扩展名。
  2. 包裹uri而不是路径。
  3. 无需在有效负载中指定类型。
  4. 检查下面给出的例子

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