長話短說，小編這幾個小時被這個畢業設計的需求弄得整個人很矇蔽！我想實現在app上上傳檔案並將檔案儲存到七牛雲平臺上面，由於對前端的promise,fetch等知識瞭解不深入，再加上不熟悉七牛雲端儲存文件，最為坑的是網上還沒有執行緒的示例程式碼！唯一的官網上的react native SDK又沒有維護，聽說寫這個SDK的作者早就辭職了！很憂傷啊！小編不就是趕個畢業設計！好了，下面我講下流程程式碼給大家以及遇到的一些坑！
一、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:未知，隨便什麼
二、上圖頁面程式碼（由於小編畢設程式碼未開源，故頁面某些部分如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'
}
});
複製程式碼三、踩過的坑
1、在你匯入的react-native-qiniu包的原始碼conf.js中，應修改你bucket所在的區域，如小編所在的區域是華南，則填寫如下：
2、如果還是不知道formInput怎麼配置，那麼檢視原始碼就知道了,如圖：