自定义Taro上传图片hooks(useUploadImg)
有两个方法需要提前引入 FileUtil(上传文件的方法)、to(对请求接口返回做了二次处理,数据和错误提示等)
//FileUtil
export namespace FileUtil {const env = {timeout: 10000,uploadImageUrl: "阿里云的地址",};const genPolicy = () => {let date = new Date();date.setHours(date.getHours() + env.timeout);let srcT = date.toISOString();const policyText = {expiration: srcT,conditions: [["content-length-range", 0, 1 * 1024 * 1024 * 1024], // 设置上传文件的大小限制1G],};var rawStr = JSON.stringify(policyText);var wordArray = Utf8.parse(rawStr);var policyBase64 = Base64.stringify(wordArray);return policyBase64;};const genSignature = (policyBase64, accessKey) => {const byte = HmacSHA1(policyBase64, accessKey);const signature = Base64.stringify(byte);return signature;};export const upload = async (fileInfo): Promise<{ url: string; errMsg: string }> => {const { path } = fileInfo;return new Promise(async (resolve) => {const res = await httpRequest({url: "图片上传的接口",method: "POST",});if (res?.code === 200 && res?.data) {const {Credentials: { AccessKeyId, AccessKeySecret, SecurityToken },} = res.data;const aliyunFileKey ="mini_" + new Date().getTime() + path.split("tmp/")[1]; //文件命名const policyBase64 = genPolicy();const signature = genSignature(policyBase64, AccessKeySecret);//小程序直传ossTaro.uploadFile({url: env.uploadImageUrl,filePath: path,name: "file",header: {"Content-Type": "multipart/form-data",},formData: {key: aliyunFileKey,policy: policyBase64,OSSAccessKeyId: AccessKeyId,signature: signature,"x-oss-security-token": SecurityToken, //使用STS签名时必传。success_action_status: "200",},success: function (resp) {if (resp?.statusCode === 200) {resolve({url: env.uploadImageUrl + aliyunFileKey,errMsg: "ok",});} else {resolve({ url: "", errMsg: resp?.errMsg });}},fail: function (err: any) {resolve({ url: "", errMsg: err });},});} else {resolve({ url: "", errMsg: res?.msg });}});};
}
//to
export async function to<T>(promise: Promise<T>): Promise<[Error | null, T]> {if (!promise || !Promise.prototype.isPrototypeOf(promise)) {// @ts-ignorereturn await new Promise((resolve, reject) => {reject(new Error("request promises as ths param"));}).catch((error) => {return [error, null];});}// @ts-ignorereturn await promise.then(function () {// @ts-ignorereturn [null, ...arguments];}).catch((error) => {return [error, null];});
}
import { useState } from "react";
import { FileUtil, to } from "@/utils";
import Taro from "@tarojs/taro";
import { useLoading } from "taro-hooks";interface UseUploadImgProps {maxLength?: number;initList?: string[];
}
export const useUploadImg = ({maxLength = 9,initList = [],
}: UseUploadImgProps) => {const [fileList, setFileList] = useState<string[]>([...initList || []]);const [showLoading, hideLoading] = useLoading({title: "上传中...",mask: true,});const handleUpload: (path: any) => Promise<{ url: string; errMsg: string }> = async (path) => {return FileUtil.upload({ path });};const handleSendImage = async () => {// 选择图片const chooseImgResp = await to(Taro.chooseImage({count: maxLength - fileList?.length,sizeType: ["original"],sourceType: ["album", "camera"],}));if (chooseImgResp[0]) {return;}if (chooseImgResp[1].errMsg !== "chooseImage:ok") {return;}const filesLen = chooseImgResp[1].tempFilePaths?.length;let asyncArr: Promise<{ url: string; errMsg: string }>[] = [];for (let i = 0; i < filesLen; i++) {asyncArr.push(handleUpload(chooseImgResp[1].tempFilePaths[i]));// 获取图片信息}showLoading().then();Promise.all(asyncArr).then((res) => {const upLoadList = res.filter(obj => obj.url !== '').map(item=>item.url);setFileList((val) => [...val, ...upLoadList]);}).catch(() => {Taro.showToast({ title: "上传失败,请重试", icon: "none" });}).finally(() => {hideLoading().then();});};return {handleSendImage,fileList,setFileList,};
};
在页面中使用
import { useUploadImg } from "定义hook的文件地址";
import Taro, { showToast } from "@tarojs/taro";
import { Image, View } from "@tarojs/components";export const UpLoadImg = () => {const { handleSendImage, fileList, setFileList } = useUploadImg({maxLength,}); // 这里就是useUploadImg 输出的方法和上传文件的list<View>{fileList.map((item, index) => (<View key={item}><Imagesrc={item}onClick={() => {if (fileList) {Taro.previewImage({urls: fileList,current: item,});}}}/><Imagesrc={iconDelete}className={styles.imgDelete}onClick={() => {fileList.splice(index, 1);setFileList(() => [...fileList]);}}/></View>))}{fileList.length < maxLength && (<View onClick={() => handleSendImage()}><Image /></View>)}
</View>
})
相关文章:

自定义Taro上传图片hooks(useUploadImg)
有两个方法需要提前引入 FileUtil(上传文件的方法)、to(对请求接口返回做了二次处理,数据和错误提示等) //FileUtil export namespace FileUtil {const env {timeout: 10000,uploadImageUrl: "阿里云的地址",};const genPolicy …...

量子密码学简介
量子密码学(英语:Quantum cryptography)泛指利用量子力学的特性来加密的科学。量子密码学最著名的例子是量子密钥分发,而量子密钥分发提供了通信两方安全传递密钥的方法,且该方法的安全性可被信息论所证明。目前所使用…...

使用docker创建自己的Android编译容器
文章目录 背景步骤1.创建Dockerfile2.编写Dockerfile指令3.编译4.使用 背景 每次拿到新机器或者系统重装,最麻烦的就是各种环境配置,最近学习了一下docker的知识,用dockerfile创建一个Android编译容器,这样就不用每次都吭哧吭哧的…...
4-Docker命令之docker load
1.docker load介绍 docker load命令是用来将从tar归档文件载入镜像 docker load命令相对应的命令是docker save 2.docker load用法 docker load [参数] [root@centos79 ~]# docker load --helpUsage: docker load [OPTIONS]Load an image from a tar archive or STDINAli…...

微信小程序格创校园跑腿小程序源码v1.1.64+前端
简介: 版本号:1.1.64 – 多学校版本 本次更新内容: 订单问题修复 (无需上传小程序) 版本号:1.1.63 – 多学校版本 本次更新内容: 失物招领增加内容安全接口; 认证增加性别选…...
【单元测试】测还是不测,这是一个问题
这篇文章也可以在我的博客中查看 “册”那!! 相信大家从小就被千叮万嘱要做单元测试。然后秉承这一信念,成为了一个测试狂魔。凡有代码,测!覆盖!最终,一波操作猛如虎:467测试&…...
Global Mapper SDK 19 中文开发文档(八)
7.2.8 GM_DBUtil (1)声明 public static class GM_DBUtil (2)方法 方法描述DBGetTableList获取指定空间数据库中的表列表DBIsDatabaseFile指示输入文件是否为数据库(Esri地理数据库、Spatialite等)DBMa…...
es检索之复合检索
背景:向量检索是文本相似度检索,现在增加新的字段进行过滤,如果以filter方式进行过滤,那么最终结果不保证有topK个,甚至一个都没有,因为它是先进行topK个向量召回,再进行filter。 当然有人建议采用scriptScore方式进行检索,但此方式可能造成请求压力过大,内存消耗。 …...

09.list 容器
9、list 容器 功能: 将数据进行链式存储 链表(list)是一种物理存储单元上非连续的存储结构,数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成: 链表由一系列结点组成 结点的组成: 一个是存…...
速盾网络:网站用速盾cdn的好处
随着互联网的快速发展,网站的速度和稳定性成为了用户访问体验的关键因素。为了提高网站的性能和可用性,许多网站开始使用CDN(Content Delivery Network)服务。本文将介绍CDN的基本概念、工作原理以及使用CDN的好处。一、CDN的基本…...

Centos7在安装Graylog时新安装MongoDB报错端口不监听服务不启动无法运行启动失败
由于虚拟机服务器上需要安装Graylog需要安装MongoDB,尝试官网下载安装包,和yum安装均无法正常启动,折腾了好几天,重装了十几次,网上搜索了很多很多资料,均无法正常运行,百度上搜索各种文档&…...
Spark Machine Learning进行数据挖掘的简单应用(兴趣预测问题)
数据挖掘的过程 数据挖掘任务主要分为以下六个步骤: 1.数据预处理2.特征转换3.特征选择4.训练模型5.模型预测6.评估预测结果 数据准备 这里准备了20条关于不同地区、不同性别、不同身高、体重…的人的兴趣数据集(命名为hobby.csv): id,h…...

DRF从入门到精通二(Request源码分析、DRF之序列化、反序列化、反序列化校验、序列化器常用字段及参数、source、定制字段、保存数据)
文章目录 一、Request对象源码分析区分原生request和新生request新的request还能像原来的reqeust一样使用吗源码片段分析总结: 二、DRF之序列化组件序列化介绍序列化步骤序列化组件的基本使用反序列化基本使用反序列化的新增反序列化的新增删除单条 反序列化的校验序…...
Flink系列之:Upsert Kafka SQL 连接器
Flink系列之:Upsert Kafka SQL 连接器 一、Upsert Kafka SQL 连接器二、依赖三、完整示例四、可用元数据五、键和值格式六、主键约束七、一致性保证八、为每个分区生成相应的watermark九、数据类型映射 一、Upsert Kafka SQL 连接器 Scan Source: Unbounded 、Sink…...
前端与后端的异步编排(promise、async、await 、CompletableFuture)
前端与后端的异步编排 文章目录 前端与后端的异步编排1、为什么需要异步编排2、前端中的异步2.1 、Promise的使用2.1.1、Promise的基础概念2.1.2、Promise中的两个回调函数2.1.3、工具方法1、Promise.all()2、Promise.race()3、Promise.resolve() 2.2 、async 与 aw…...

python打开opencv图像与QImage图像及其转化
目录 1、Qimage图像 2、opencv图像 3、python打开QImage图像通过Qlabel控件显示 4、python打开QImage图像通过opencv显示 5、python打开opencv图像并显示 6、python打开opencv图像通过Qlabel控件显示 1、Qimage图像 QImage是Qt库中用于存储和处理图像的类。它可以存储多种…...
linux 其他版本RCU
1、不可抢占RCU 如果我们的需求是“不管内核是否编译了可抢占RCU,都要使用不可抢占RCU”,那么应该使用不可抢占RCU的专用编程接口。 读者使用函数rcu_read_lock_sched()标记进入读端临界区,使用函数rcu_read_unlock_ sched()标记退出读端临界…...

【单调栈】LeetCode:2818操作使得分最大
作者推荐 map|动态规划|单调栈|LeetCode975:奇偶跳 涉及知识点 单调栈 题目 给你一个长度为 n 的正整数数组 nums 和一个整数 k 。 一开始,你的分数为 1 。你可以进行以下操作至多 k 次,目标是使你的分数最大: 选择一个之前没有选过的 非…...

uniapp 添加分包页面,配置分包预下载
为什么要分包 ? 分包即将小程序代码分成多个部分打包,可以减少小程序的加载时间,提升用户体验 添加分包页面 比较便捷的方法是使用vscode插件 uni-create-view 新建分包文件夹 以在我的页面,添加分包的设置页面为例,新建文件夹 s…...

成功案例分享:物业管理小程序如何助力打造智慧社区
随着科技的进步和互联网的普及,数字化转型已经渗透到各个行业,包括物业管理。借助小程序这一轻量级应用,物业管理可以实现线上线下服务的无缝对接,提升服务质量,优化用户体验。本文将详细介绍如何通过乔拓云网设计小程…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...