react native(expo)选择图片/视频并上传阿里云oss

devtools/2024/11/15 0:49:46/

1.引入相关库:

@ant-design/react-native ant风格UI库
expo-file-system 文件访问
expo-image-picker 图片/视频选择器

2.新建图片选择并上传的帮助类

import { Toast } from '@ant-design/react-native';
import * as FileSystem from "expo-file-system";
import * as ImagePicker from 'expo-image-picker';
import AppService from "../api/app";
import Loading from "../components/ui/Loading";
import LogUtil from "./log_util";// 从后端api获取
export let ossUrl = 'https://oss-2008.oss-cn-hongkong.aliyuncs.com';
let ossConfig = null;/*** @desc 选择相册图片*/
export const pickImage = async (mediaTypes = ImagePicker.MediaTypeOptions.Images) => {// No permissions request is necessary for launching the image librarylet result = await ImagePicker.launchImageLibraryAsync({mediaTypes: mediaTypes,allowsEditing: true,aspect: null,quality: 0.5,});LogUtil.log('pick image result = ', result);if (result.canceled) {return null;}if (mediaTypes === ImagePicker.MediaTypeOptions.Images) {if (result.assets[0]?.fileSize/(1024*1024) > 2) {Toast.fail('图片不能超过2MB');return null;}} else if (mediaTypes === ImagePicker.MediaTypeOptions.Videos) {if (result.assets[0]?.fileSize/(1024*1024) > 10) {Toast.fail('视频不能超过10MB');return null;}} else {}return result.assets[0].uri;
};export const uploadImage = async (fileName, filePath, nav) => {Loading.show();// 从后端获取阿里云oss相关凭证const res = await AppService.getAliyunOssToken({}, nav);if (res.code === 200) {/*** host = obj['host']policyBase64 = obj['policy']accessid = obj['accessid']signature = obj['signature']expire = parseInt(obj['expire'])callbackbody = obj['callback']key = obj['dir']**  */ossConfig = res.data;ossUrl = ossConfig['host'];} else {Loading.hide();Toast.info('获取oss token信息失败')return null;}if (filePath && filePath.length > 0) {const split = filePath.split('.');let realFileName = (!fileName || fileName.length === 0) ? `${random_string()}.${split[split.length - 1]}` : `${fileName}.${split[split.length - 1]}`;let key = `${ossConfig['dir']}${realFileName}`;let imageServicePath = `${ossConfig['host']}/${key}`;try {LogUtil.log('ossUrl = ', ossUrl)// 使用FileSystem.uploadAsync上传文件至阿里云ossconst response = await FileSystem.uploadAsync(`${ossUrl}`, filePath, {fieldName: 'file',httpMethod: 'POST',uploadType: FileSystem.FileSystemUploadType.MULTIPART,parameters: {'name': realFileName,'key': key,'policy': ossConfig['policy'],'OSSAccessKeyId': ossConfig['accessid'],'success_action_status': '200','callback': ossConfig['callback'],'signature': ossConfig['signature']}})LogUtil.log('response', JSON.stringify(response), 'imageServicePath', imageServicePath)Loading.hide();if (response.status !== 200) {return null;}return { imageServicePath, fileName: key };} catch (error) {LogUtil.error(error)}}Loading.hide();return null;
}const random_string = (len) => {len = len || 32;let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';let maxPos = chars.length;let pwd = '';for (let i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;
}

3.代码中调用:

3.1 只选择图片、视频后用于展示

pickImage(mediaTypes).then(uri => {if (uri) {// uri可直接使用ImageView组件展示}})

3.2 选择图片、视频再上传阿里云oss后展示

    const ChatTypes = {voice: 6,image: 2,video: 3,text: 1,systemTips: 4,autoText: 5,}    let imageSendValue = '';let videoSendValue = '';let imageUri = '';let videoUri = '';const pickAndUploadImage = (type) => {let mediaTypes = type === ChatTypes.image ? ImagePicker.MediaTypeOptions.Images : ImagePicker.MediaTypeOptions.Videos;pickImage(mediaTypes).then(uri => {if (uri) {uploadImage(null, uri, navigation).then(res => {if (!res) {Toast.info(i18n.t("Chat.UploadFail"));return;}LogUtil.log('imageServicePath = ', res?.imageServicePath, 'fileName = ', res?.fileName)switch (type) {case ChatTypes.image:imageSendValue = res?.fileName;imageUri = uri;// sendMessage(ChatTypes.image, imageSendValue, imageUri);break;case ChatTypes.video:videoSendValue = res?.fileName;videoUri = uri;// sendMessage(ChatTypes.video, videoSendValue, videoUri);break;default:break;}})}})}


http://www.ppmy.cn/devtools/114224.html

相关文章

ubuntu安装postgreSQL

目录 1.执行更新命令 2. postgresql安装命令 ​编辑3.安装完成 4.登录postgresql命令 5.修改postgresql密码命令 6. postgreSQL密码修改完成 7.进入postgres用户 8. 进入postgresql 9.创建数据库命令 10.删除数据库 11.查看版本号 1.执行更新命令 sudo apt update…

Spring Boot-热部署问题

Spring Boot 热部署问题分析与解决方案 热部署&#xff08;Hot Deployment&#xff09;是指在应用程序运行过程中&#xff0c;无需停止应用就可以动态加载新代码、配置或资源&#xff0c;从而提升开发效率。在 Spring Boot 开发中&#xff0c;热部署是一项非常实用的功能&…

快速排序(Quick Sort)(C语言) 超详细解析!!!

生活的本质是什么呢? 无非就是你要什么就不给你什么. 而生活的智慧是什么呢? 是给你什么就用好什么. ---马斯克 索引 一. 前言二. 快速排序的概念三. 快速排序的实现1. hoare2. 挖坑法3. 前后指针法 总结 正文开始 一. 前言 接上文, 前面我们了解了插入排序, 与优化版本希尔…

进程与线程

操作系统的设计可以归结为三点&#xff1a; &#xff08;1&#xff09;以多进程形式&#xff0c;允许多个任务同时运行&#xff1b; &#xff08;2&#xff09;以多线程形式&#xff0c;允许单个任务分成不同的部分运行&#xff1b; &#xff08;3&#xff09;提供协调机制&…

iptables限制网速

1、使用hashlimit来限速 #从eth0网卡进入INPUT链数据&#xff0c;使用模块hashlimit 限制网速为100kb/s或2mb/s,超过限制的数据包会被DROP。OUTPUT链同理&#xff0c;mode为srcip&#xff0c;有4个mode选项: srcip&#xff08;默认匹配每个源地址IP&#xff0c;配置指定源地址…

学习使用Docker

学习使用Docker 安装环境 windows下安装docker desktop 创建镜像 特定tomcat版本war包镜像 # FROM openjdk:8-jdk FROM dockerproxy.net/library/openjdk:8-jdk# 设置时区环境变量 ENV TZAsia/Shanghai ENV CATALINA_HOME /usr/local/tomcat ENV PATH $CATALINA_HOME/bin:…

STM32-UART配置注释

void MX_USART1_UART_Init(void) { /* USER CODE BEGIN USART1_Init 0 */ // 这里是用户代码的开始部分&#xff0c;可以在这里添加任何初始化之前的自定义代码 // 但在这个例子中&#xff0c;它是空的 /* USER CODE END USART1_Init 0 */ /* 配置USART1的硬件参数 */ …

【计网】从零开始使用TCP进行socket编程 ---服务端业务模拟Xshell

最糟糕的情况&#xff0c; 不是你出了错&#xff0c; 而是你没有面对出错的勇气。 从零开始使用TCP进行socket编程 1 通信过程的多版本实现1.1 多进程版本1.2 多线程版本 2 服务端业务模拟Xshell2.1 整体框架设计2.2 Command类设计 1 通信过程的多版本实现 在前一篇的文章…