@koimy/rn-file-upload
v1.0.3
Published
react-native 上传文件
Downloads
1
Readme
文件上传
安装
yarn add @koimy/rn-file-upload
使用示例
import React, { useState } from 'react';
import { Image, Text, TouchableOpacity } from 'react-native';
import image_picker, { ImageData } from '@koimy/rn-image-picker';
import file_upload from './index';
export default () => {
// 图片
const [image, set_image] = useState<ImageData>({});
const file_url = ''
const productid = ''
/**
* 选取图片
*/
const picker = async () => {
const res = await image_picker({
multiple: false,
mediaType: 'photo'
});
// 直接渲染本地图片
// set_image(res[0]);
if (res.length > 0) {
const uploads = res.map((item) => {
return { // 上传的文件可能为多个,所以是数组
name: item.path!, // 上传后的文件名,如果未定义则是filename的文件名
filename: item.path!, // 要上传的文件名
filepath: item.path!, // 文件的地址
filetype: item.mime! // 文件的类型
};
});
const ret = await file_upload(uploads,
file_url,
productid,
(job_id) => {
console.log(job_id);
},
(percentage) => {
console.log(percentage);
}
)
set_image(ret[0]);
}
};
return (
<TouchableOpacity style={{ width: '100%', height: '100%' }} onPress={() => picker()}>
{
image.path ? (
<Image resizeMode='cover' style={{ width: '100%', height: '100%' }} source={{ uri: image.filename ? `${file_url}/getfile?productid=${productid}&id=${image.filename}` : image.path }}></Image>
) : (
<Text>选择图片</Text>
)
}
</TouchableOpacity>
);
};