React Native 上傳圖片至七牛雲存儲

長話短說，小編這幾個小時被這個畢業設計的需求弄得整我的很矇蔽！我想實如今app上上傳文件並將文件存儲到七牛雲平臺上面，因爲對前端的promise,fetch等知識瞭解不深刻，再加上不熟悉七牛雲存儲文檔，最爲坑的是網上尚未線程的示例代碼！惟一的官網上的react native SDK又沒有維護，據說寫這個SDK的做者早就辭職了！很憂傷啊！小編不就是趕個畢業設計！好了，下面我講下流程代碼給你們以及遇到的一些坑！

1、react native端上傳代碼

首先實現的頁面就這個樣子，先放一張大頭貼(樣式有點醜，後期再調)：

在這個頁面中用到了一些第三方組件，因此你必須先導入組件：

yarn add react-native-image-picker ： 該庫用於從相機選擇圖片

yarn add react-native-qiniu： 七牛雲上傳組件

核心上傳代碼以下：

/**
 * 直傳文件
 */
方法簽名爲：`function uploadFile(uri, token, formInput, onprogress)`
使用以下：
upload(uri) {//傳入一個圖片選擇地址
          qiniu.Rpc.uploadFile(uri,'_5q1hS4hLzHrWvNfK5wnQczIPub43_NnvMl7d-4B:RD93EuPYVULGU7AAmBMVp0T8oxs=:eyJzY29wZSI6Im15YXBwIiwiZGVhZGxpbmUiOjE1OTh9', {
                key:'asdf',
                type:'application/octet-stream',
                name:undefined,
              }
            ,function (resp) {
            console.log(resp);
          });
     }
複製代碼

• token:上傳令牌，經過七牛官網java sdk生成
• formInput:formInput對象如何配置請參考七牛官方文檔「直傳文件」一節

key：表示你資源上傳到七牛雲以後保存的文件名

type:表示uri所表明的類型，此處爲二進制流，上傳文件通常都是二進制

name:未知，隨便什麼

2、上圖頁面代碼（因爲小編畢設代碼未開源，故頁面某些部分如header可能提示找不到）

/**
	發表評論
*/
import React, { Component } from 'react';
import Header from '../../components/common/Header';//提示找不到
import {TextareaItem,ImagePicker,InputItem,List,WhiteSpace} from 'antd-mobile';//須要本身安裝該庫
import Util from '../../utils/Util';//提示找不到
import * as picker  from "react-native-image-picker";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity
} from 'react-native';
var qiniu = require('react-native-qiniu');
var data = [];
const photoOptions = {
    title:'請選擇圖片',//標題
    cancelButtonTitle:'取消',//取消按鈕名稱
    takePhotoButtonTitle:'拍照',//相機按鈕名稱
    chooseFromLibraryButtonTitle:'選擇相冊...',//從相冊取照片名稱
	  quality: 0.8,//照片質量
    mediaType:'photo',//能夠是照片，也能夠是video
    videoQuality:'high',//視頻質量
    durationLimit:10,//video最長10s
    allowsEditing: true,//照片是否能夠被修改，Ios有效
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

export default class PicturePost extends Component{

 	constructor(props){
 		super(props);
 		this.state = {
		    files: data
		  }
 	}

  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
    console.log("heoolo onChange");
  }

choosePicker=()=>{
        picker.showImagePicker(photoOptions, (response) => {
            console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }else {
                let source = {url: response.uri} ;
				        console.log('source===' + source.url)
                console.log(response)
                var files = this.state.files;
                files.push(source);
               	this.setState({
    			           files:files
    			       });
                console.log('data===' + this.state.files)
            }
        });
    }

     upload(uri) {//這裏是核心上傳的代碼
          qiniu.Rpc.uploadFile(uri,'_5q1hS4hLzHrWvNfK5wnQczIPub43_NnvMl7d-4B:RD93EuPYVULGU7AAmBMVp0T8oxs=:eyJzY29wZSI6Im15YXBwIiwiZGVhZGxpbmUiOjE1MjE4OTAyOTh9', {
                key:'asdf',
                type:'application/octet-stream',
                name:undefined,
              }
            ,function (resp) {
            console.log(resp);
          });
     }

	render(){
		return (
  	         <View style={styles.container}>
      	         	<Header
      						showBack={true}
      						showTitle={true}
      						showSearch={false}
      						sendText='發送'
      						title='書評'
      					/>
    	         	<View style={{width:Util.size.width,backgroundColor:'#fff'}}>
    		         		<TextareaItem
    				            rows={6}
    				            count={200}
    				            placeholder='寫點什麼吧！'
    				            style={{fontSize:11,backgroundColor:'#fff'}}
    				          />
    	         	</View> 	 
    	         	<ImagePicker
    				          files={files}
    				          selectable={files.length < 2}
    				          onChange={this.onChange}
              				  onImageClick={(index, files) =>{
              				  	console.log(files[index].url)
              				  } }
              				  onAddImageClick={
              				  	this.choosePicker
              				  }
    				    />
                 <List>
                       <InputItem
                          placeholder="請輸入書名"
                          labelNumber={7}
                          placeholdertTextColor='#fff'
                        />
                        <InputItem
                          placeholder="請輸入做者"
                          labelNumber={7}
                        />
                </List>
                //上傳代碼在此處觸發
                <TouchableOpacity onPress={()=>{
                  let imgAry = this.state.files;
                  console.log(this.state.files)
                        this.upload(imgAry[0].url);
                }}>
                <Text>上傳</Text>
                </TouchableOpacity>
	         </View>
         );
	}
}

const styles = StyleSheet.create({
	container:{
		backgroundColor:'#e4e4e4'
	}
});

複製代碼

3、踩過的坑

一、在你導入的react-native-qiniu包的源代碼conf.js中，應修改你bucket所在的區域，如小編所在的區域是華南，則填寫以下：

二、若是仍是不知道formInput怎麼配置，那麼查看源代碼就知道了,如圖：