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

embedded/2024/9/19 19:27:43/ 标签: react native, 阿里云, react.js

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/embedded/113042.html

相关文章

C++11(3)

目录 可变参数模版 获取参数包值的方式 1.递归方式展开参数包 2.使用数组逗号表达式展开 emplace_back函数 lambda表达式 C98中的例子 lambda表达式 语法 lambda表达式和函数比较 包装器 function包装器 bind绑定器 可变参数模版 C11 的新特性可变参数模板能够让您…

ElK 8 收集 Nginx 日志

1. 说明 elk 版本&#xff1a;8.15.0 2. 启个 nginx 有 nginx 可以直接使用。我这里是在之前环境下 docker-compose.yml 中启动了个 nginx&#xff1a; nginx:restart: alwaysimage: nginx:1.26.1ports:- "80:80"- "443:443"volumes:#- ./nginx/html:/…

Nuxt Kit 中的页面和路由管理

title: Nuxt Kit 中的页面和路由管理 date: 2024/9/17 updated: 2024/9/17 author: cmdragon excerpt: 摘要:本文介绍了Nuxt Kit中页面和路由管理的高级功能,包括extendPages自定义页面路由、extendRouteRules定义复杂路由逻辑及addRouteMiddleware注册路由中间件。通过这…

[苍穹外卖]-12Apache POI入门与实战

工作台 需求分析: 工作台是系统运营的数据看板, 并提供快捷操作入口, 可以有效提高商家的工作效率 营业额: 已完成订单的总金额有效订单: 已经完成订单的数量订单完成率: 有效订单数/总订单数*100%平均客单价: 营业额/有效订单数新增用户: 新增的用户数量 接口设计: 一个接口返…

计算机毕业设计 二手闲置交易系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

fiddler抓包02_安装

① 访问官网&#xff1a;https://www.telerik.com/fiddler ② 点击“try for free”&#xff0c;选择经典版。 ③ 选择任意用途&#xff0c;输入邮箱&#xff0c;选择地区china&#xff0c;确定下载。 ④ 双击安装包进行安装。 安装后为英文界面&#xff1a;

nginx 文件尺寸过大解决方案

http { # 其他配置... client_max_body_size 1M; # 这是默认值&#xff0c;也可以在 server 块中覆盖 # 其他配置... } server { listen 80; server_name shop.yanmishu.cn; # 如果有这个配置&#xff0c;则会覆盖 http 块中的设置 …

借助大模型将文档转换为视频

利用传统手段将文档内容转换为视频&#xff0c;比如根据文档内容录制一个视频&#xff0c;不仅需要投入大量的时间和精力&#xff0c;而且往往需要具备专业的视频编辑技能。使用大模型技术可以更加有效且智能化地解决上述问题。本实践方案旨在依托大语言模型&#xff08;Large …

2024网络安全人才实战能力白皮书安全测试评估篇

9月10日&#xff0c;国内首个聚焦“安全测试评估”的白皮书——《网络安全人才实战能力白皮书-安全测试评估篇》&#xff08;以下简称“白皮书”&#xff09;在国家网络安全宣传周正式发布。 作为《网络安全人才实战能力白皮书》的第三篇章&#xff0c;本次白皮书聚焦“安全测…

基于react native的锚点

基于react native的锚点 效果示例图示例代码 效果示例图 示例代码 /* eslint-disable react-native/no-inline-styles */ import React, { useEffect, useRef, useState } from react; import {Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpacity,View, } fr…

若依nday复现

前言 声明&#xff1a;此文章仅做学习&#xff0c;未经授权严禁转载。请勿利用文章内的相关技术从事非法测试&#xff0c;如因此产生的一切不良后果与文章作者无关 本文章只做简单汇总&#xff0c;在此感谢其他师傅的文章和分享 前置准备 环境搭建 下载&#xff1a;https:/…

微服务之间远程调用实现思路

项目使用的Spring Cloud Alibaba框架&#xff0c;微服务之间远程调用使用OpenFeign&#xff0c;具体实现步骤如下&#xff1a; &#xff08;1&#xff09;在api工程定义OpenFeign接口&#xff0c;使用FeignClient注解进行定义。 &#xff08;2&#xff09;服务提供方定义Open…

【FFmpeg应用场景概述】

Question FFmpeg应用场景概述 Answer FFmpeg是一个开源的音视频处理工具&#xff0c;广泛应用于多种场景。以下是一些常见的应用场景概述&#xff1a; 视频转码&#xff1a;FFmpeg支持多种音视频格式的转换&#xff0c;可以将视频文件从一种格式转换为另一种格式&#xff0c…

Vue基础明晰

Vue基础明晰 ​ Vue长期处于会写而不去理解&#xff0c;此文简单梳理一下。 ​ 一个Vue页面基本分为两部分&#xff1a;1.搜索、按钮等为主的表单域 2.展示数据库信息的表格域 Form表单&#xff1a; 一个Form表单其下为多个form-item&#xff0c;各搜索输入框都包裹在form-i…

HarmonyOS开发之使用Picker(从相册选择图片),并且通过Swiper组件实现图片预览

一&#xff1a;效果图&#xff1a; 二&#xff1a;添加依赖 import picker from ohos.file.picker; 三&#xff1a;创建showDialog showDialog() {AlertDialog.show({message: 从相册选择,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {val…

pip安装包、卸载包、更新包命令

pip安装包、卸载包、更新包命令 pip命令具体说明备注pip list列出当前环境下已安装的包pip install [安装包名]安装指定包pip install SomePackage1.0.4安装指定版本pip uninstall [卸载包名]卸载指定包pip install --upgrade [要升级的包名称]升级指定包pip install -U [要升…

C++笔记---继承(下)

1. 无法被继承的类 要实现无法被继承的类有两种方式&#xff1a; C98及其之前&#xff1a;将父类的构造函数设置为private成员。 C11及其之后&#xff1a;使用final关键字修饰父类。 将构造函数设置为private是因为&#xff1a;子类的构成必须调用父类的构造函数&#xff0c;但…

C++学习笔记(26)

七 、显示字符串中的字符 从界面上输入一个字符串&#xff08;C 风格&#xff09;&#xff0c;把字符串中的每个字符显示出来&#xff0c;如果输入的是"abc"&#xff0c;要求&#xff1a; 1&#xff09;正序显示&#xff1a;a b c 2&#xff09;逆序显示&#xff1a;…

NC 矩阵最长递增路径

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 给定一个 n 行…

【SQL】百题计划:SQL最基本的判断和查询。

[SQL]百题计划 Select product_id from Products where low_fats "Y" and recyclable "Y";