react-native-fileupload 使用

最新推荐文章于 2023-06-29 16:44:35 发布

weixin_34162401

最新推荐文章于 2023-06-29 16:44:35 发布

阅读量610

点赞数

文章标签：移动开发 java git

原文链接：https://my.oschina.net/KJhulinhua/blog/1002636

版权

2019独角兽企业重金招聘Python工程师标准>>>

react-native-fileupload 使用

简介

Imoprtant: iOS version created by booxood (react-native-file-upload). This repository is the continuation of https://github.com/booxood/react-native-file-upload.

支持同时上传多个文件
支持文件和文件夹

安装

npm install react-native-fileupload --save

配置

1. ios

在xcode 中右击你的项目 ➜ Add Files to [your project's name]
选择 node_modules ➜ react-native-fileupload and add FileUpload.m
重新run一下项目
这这里我遇到了
```
 RCTBridgeModule.h file not found
```
解决参看:链接

2. Android

Note: Android support requires React Native 0.12 or later

编辑 android/settings.gradle

 rootProject.name = 'MyApp'
 include ':app'

 //添加下面两句:

 include ':react-native-fileupload'
 project(':react-native-fileupload').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fileupload/android')

编辑android/app/build.gradle 如下

 apply plugin: 'com.android.application'

 android {
   ...
 }

 dependencies {
   compile fileTree(dir: 'libs', include: ['*.jar'])
   compile 'com.android.support:appcompat-v7:23.0.0'
   compile 'com.facebook.react:react-native:0.12.+'

   // 添加这一句:
   compile project(':react-native-fileupload')
 }

编辑 MainActivity.java 文件在 (android/app/src/main/java/.../MainActivity.java)如下面

 package com.xjcloudprj;

 //添加这一句
 import com.yoloci.fileupload.FileUploadPackage;

 import com.facebook.react.ReactActivity;

 public class MainActivity extends ReactActivity {

     /**
      * Returns the name of the main component registered from JavaScript.
      * This is used to schedule rendering of the component.
      */
     [@Override](https://my.oschina.net/u/1162528)
     protected String getMainComponentName() {
         return "XJCloudPrj";
     }
 }

使用

这里自己去研究吧，为了文章的完整行，我就把git上的列子抄下来了：

'use strict';

var React = require('react-native');
var FileUpload = require('NativeModules').FileUpload;

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var FileUploadDemo = React.createClass({
  componentDidMount: function() {
    var obj = {
        uploadUrl: 'http://127.0.0.1:3000',
        method: 'POST', // default 'POST',support 'POST' and 'PUT'
        headers: {
          'Accept': 'application/json',
        },
        fields: {
            'hello': 'world',
        },
        files: [
          {
            name: 'one', // optional, if none then `filename` is used instead
            filename: 'one.w4a', // require, file name
            filepath: '/xxx/one.w4a', // require, file absoluete path
            filetype: 'audio/x-m4a', // options, if none, will get mimetype from `filepath` extension
          },
        ]
    };
    FileUpload.upload(obj, function(err, result) {
      console.log('upload:', err, result);
    })
  },
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('FileUploadDemo', () => FileUploadDemo);

转载于:https://my.oschina.net/KJhulinhua/blog/1002636