美文网首页RN资料架程序员React Native开发经验集
ReactNative 实现的文件上传功能(实测可行!)

ReactNative 实现的文件上传功能(实测可行!)

作者: ZPengs | 来源:发表于2017-05-22 10:19 被阅读2568次

    欢迎大家加群讨论

    点击链接加入群[ReactNative-解决问题交流群] :644124441

    点击链接加入群[ReactNative技术交流群2] :687663534

    (理论上支持所有文件格式上传)在这里已经实现文件上传功能。以下是关键代码,按照我的写法实现文件上传是没有问题的。有问题可以开个issues。给个Star,感谢!
    不多说了直接上车!源码地址欢迎Star ,感谢支持!

    Upload.gif

    关键代码:

    //**************文件上传**************
        uploadImage(imgAry){
            console.log('imgAry', imgAry);
            let formData = new FormData();       //因为需要上传多张图片,所以需要遍历数组,把图片的路径数组放入formData中
            for(var i = 0;i<imgAry.length;i++){
    //截取获取文件名
                var a=imgAry[i].uri;
                var arr = a.split('/');
    // 获取文件名end
    //      判断文件的类型(视频-图片等)end
                let file = {uri: imgAry[i], type: imgAry[i].mime, name: arr[arr.length-1]};   //这里的key(uri和type和name)不能改变,
                formData.append("file", file);   //这里的files就是后台需要的key
                //这里的files就是后台需要的key
            }
            console.log('formData', formData);
            console.log('uri', imgAry[0].uri);
            var request = {
                imgAry,
            };
            console.log('request', request);
            fetch('http://'+yourServerIP+'/api/resources',{
                method:'POST',
                headers:{
                    'Content-Type':'multipart/form-data',
                },
                body:formData,
            })
            // .then((response) => response.json())
                .then((responseData)=>{
                alert('文件上传成功!');
            console.log('responseData=',responseData);
    
        })
        .catch((error)=>{console.error('error=',error)});
        },
    

    By--ZPengs

    相关文章:
    1.React Native开发错误警告处理总结(已解决 !持续更新)
    2.React Native开发总结之:开发技巧和调试技巧
    3.React Native开发总结:一、开发环境配置
    4.ReactNative之Android打包APK方法(趟坑过程)
    5.Android 调试错误总结(ReactNative开发)(持续更新)
    6.ReactNative开发之真机测试
    7.React Native开发之iOS打包ipa发布(亲测可行)

    相关文章

      网友评论

      • ZPengs:我看简书上问问题的不少,我就决定弄个群大家一起交流吧 欢迎大家加群交流
        点击链接加入群【ReactNative-解决问题交流】:https://jq.qq.com/?_wv=1027&k=4EUGhJD

        群号: 644124441

      本文标题:ReactNative 实现的文件上传功能(实测可行!)

      本文链接:https://www.haomeiwen.com/subject/zadbxxtx.html