react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案

本文介绍：react移动端 antd-mobile V2版本使用图片选择器 ImagePicker时，前端压缩图片并且上传腾讯云COS

如果不上传腾讯云，纯选择压缩，可查看：antd-mobile-v2图片选择器ImagePicker压缩图片处理方案

后端出接口获取cos配置信息，文中GET 请求接口可看另一个博客axios常用请求封装

腾讯云JSSDK：https://cloud.tencent.com/document/product/436/11459

安装腾讯云cos
注意腾讯云后台管理，配置cos的put、get、del等跨域信息（*最好，否则本地调试不能使用。前端不知道的要运维配置）

yarn add cos-js-sdk-v5
或
npm install cos-js-sdk-v5

父组件：(非必须，不想抽离可以直接怼一个页面上)

项目@引用如果没有配置，可用 …/ 相对路径方式。
若研究可参考我另一个项目：https://blog.csdn.net/weixin_44461275/article/details/122587585

 // 引用import ImgUpload from '@/components/ImgUpload';// 变量声明const [uploadImgList, setUploadImgList] = useState([]); // uploadImgList最终结果的图片列表const [showBigObj, setShowBigObj] = useState({ // 点击放大记录信息 -- 非必须visiable: false,url: ""});// 调用<ImgUploadlength={3} //每行显示数量multiple //是否多选maxNum={5} //长度限制+提示（自定义参数，二次封装的）handleImgList={setUploadImgList}onImageClick={(idx, files) => handleShowBigImg(true, files[idx].url)} //点击方法使用/>

子组件：

import React, { useState } from 'react';
import { ImagePicker, Toast } from 'antd-mobile';
import COS from 'cos-js-sdk-v5';  //腾讯云cos
import { GET } from '@/utils/request'; //封装的GET请求，我这边项目是get请求接口获取cos配置信息 博客：https://blog.csdn.net/weixin_44461275/article/details/122230473有介绍import './index.css';// 文档：腾讯云JSSDK
// https://cloud.tencent.com/document/product/436/11459const ImagePickerExample = (props) => {const { handleImgList, maxNum } = props;const [imgList, setImgList] = useState([]);function convertImgToBase64(url, file, callback, outputFormat) {if(file.size <= 5e5) return callback(url); //小于500kb 不压缩 -- 非必须let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');let img = new Image;img.crossOrigin = 'Anonymous';img.onload = function() {let width = img.width;let height = img.height;let bili = Math.round(width / 750) || 1; // 数据比例根据实际项目调整let rate = 1.5 / bili;canvas.width = width * rate;canvas.height = height * rate;ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);let dataURL = canvas.toDataURL(outputFormat || 'image/jpeg', 0.9); //0.9可改其他的，清晰度根据实际项目调整 0-1范围callback.call(this, dataURL);canvas = null;}img.src = url;}const uploadImg = (imgObj) => {return new Promise((resolve, reject) => {GET("uploadCos").then(res => {const credentials = res.data.credentials;let cos = new COS({SecretId: credentials.tmpSecretId, // 文档是下面两个，实际配置报错，查看源代码是这两个SecretKey: credentials.tmpSecretKey,// TmpSecretId: credentials.tmpSecretId,// TmpSecretKey: credentials.tmpSecretKey,SecurityToken: credentials.sessionToken,// 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000000})convertImgToBase64(imgObj.url, imgObj.file, (convertImg) => {const KeyStr = 'dme-wechat/' + imgObj.file.name + '?_t=' + (new Date).getTime() + Math.random() * 1e18;cos.putObject({Bucket: res.data.bucketName,//存储桶名称,必须字段Region: res.data.regionName,//地域名字,必须字段StorgeClass: 'STANDARD',Key: KeyStr, // 必须字段Body: convertImg,}, (err, data) => {if (data) {resolve({...imgObj,fileUrl: `https://${data.Location}`})}reject();});})}).catch(function (res) {reject();})})};// 新增-删除 图片事件function onChange(files, type, index) {if (maxNum && files.length > maxNum) Toast.info(`最大允许上传${maxNum}张图片`, 2, '', false);files = maxNum ? files.slice(0, maxNum) : files;console.log(files, type, index);if (type === 'add') {let taskAll = files.map(ii => {if (ii.fileUrl) {return ii;} else {return uploadImg(ii)}})Toast.loading('上传中...', 1000, '', false);Promise.all(taskAll).then(res => {Toast.hide();setImgList(res); // 选择器列表handleImgList(res.map(ii => ii.fileUrl)); // 传递给父级}).catch(function (res) {Toast.hide();Toast.info(`上传失败，请稍后重试~`, 2, '', false);})} else {setImgList(files); // 选择器列表handleImgList(files.map(ii => ii.fileUrl)); // 传递给父级}}return (<ImagePickerfiles={imgList}onChange={onChange}selectable={maxNum && imgList.length < maxNum} //长度限制{...props}/>)
}export default ImagePickerExample

每个公司新项目要求很可能不一致，活学活用。
canvas前端压缩，无非是压缩宽高、清晰度这两个方面。专业不失真，纯压缩的压缩算法前端没多少会的（美图秀秀、tinypng类似那种底层算法）

略略略~~ 有问题留言

react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案相关推荐

php图片上传腾讯云cos,PHP生成腾讯云COS接口需要的请求签名
COS和请求签名是什么 COS 是腾讯云对象存储的缩写及简称,请求签名是第三方在调用COS相关接口时需要按需提供的.经过特定算法创建而成的一组字符串信息,将唯一的标识当前第三方身份,提供通信双方的身份 ...
php图片上传腾讯云cos,ThinkPHP集成腾讯云存储(COS)--详解
准备工作: 一. 根据图示进入COS 点击立即使用进入后根据下面点击新建:Bucket(Bucket就是你往云存储的一个目录) 新建Bucket 二. 下载SDK 下一步: 然后复制把整个cos文件 ...
图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤导包 <dependency><gr ...
TP3.2+图片上传腾讯云存储(详细教程)
tp3.2做图片腾讯云存储 * 项目需求显示样子腾讯云操作前端代码后端代码项目需求前端引用图片上传插件,将图片存储在腾讯云: 显示样子上传之前样子上传后效果腾讯云操作 1.创建存储桶 ...
腾讯云COS服务器文件上传与生命周期的设置，以及Opencv nparry数组格式图片非文件流方式上传
目录 Opencv numpy arry图片非文件流直接上传腾讯云COS服务器的文件上传和生命周期的设置 1.申请服务器 2.创建桶 3.官方文档以及安装SDK 4.开始使用(官方示例代码) 5.必 ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
移动端/手机端完成图片旋转压缩剪裁上传
本篇文章主要介绍移动端/手机端图片的旋转.压缩.剪裁.上传这个功能的实现已经好了几次方案流程了,对最终的方案流程进行简述实现功能的主要方法/思想 1.图片的选取主要是通过input实现 2.图片的 ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
好用的图片选择器TZImagePickerController与图片浏览器JXPhotoBrowser（支持本地和网络）
好用的图片选择器TZImagePickerController与图片浏览器JXPhotoBrowser(支持本地和网络) TZimagePickerControll 是仿微信选择图片的第三方库 fun ...

react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案

react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案相关推荐

最新文章

热门文章