h5图片压缩后变为base64格式的流地址上传服务器

**操作逻辑:前端把图片压缩变为base64格式的流地址,然后把base64格式的流地址传输到后端进行上传到cos服务器

操作流程**
1.前端:我这里是通过uniapp开发h5的,upLoadPutBase64是封装好的上传后端服务器的接口

div写上
<helang-compress ref="helangCompress"></helang-compress>

引入压缩文件import helangCompress from '../../components/helang-compress/helang-compress';
// 单张压缩this.$refs.helangCompress.compress({src: filePath,maxSize: 800,fileType: 'jpg',quality: 0.85,minSize: 640 //最小压缩尺寸,图片尺寸小于该时值不压缩,非H5平台有效。若需要忽略该设置,可设置为一个极小的值,比如负数。}).then((res1) => {// 压缩成功回调// console.log('压缩成功回调', res1)upLoadPutBase64({ //发送请求给后端base64: res1}).then(resdata => {if (resdata.data.code == 200) {//更新信息undateUserInfo({avatar: resdata.data.url}).then(res => {if (res.data.code != 200) {return uni.$u.toast(res.data.message)}this.userInfo.avatar = resdata.data.urluni.setStorage({key: 'userInfo',data: JSON.stringify(this.userInfo),})uni.hideLoading();uni.$u.toast('上传成功');})} else {uni.hideLoading();uni.$u.toast('上传失败');}})}).catch((err) => {// 压缩失败回调uni.hideLoading();uni.$u.toast('上传失败');})

后端hyperf

   //将Base64转为图片并保存到cos服务器#[RequestMapping(path: "putBase64", methods: ["POST"])]#[Middleware(middleware: UserJwtMiddleware::class)]public function putBase64(RequestInterface $request){$file = $request->input('base64'); // 获取上传的文件$base64Prefix = 'data:image/jpeg;base64,';$base64Image = substr($file, strlen($base64Prefix));// 处理上传逻辑,保存文件到本地或其他操作// 示例:上传文件到 COS$cosObjectName = 'ultra/' . date('YmdHis') . '/' . uniqid() . '.png';$secretId = env('COS_SECRET_ID'); // 替换为你的 secretId$secretKey = env('COS_SECRET_KEY'); // 替换为你的 secretKey$region = env('COS_REGION'); // 替换为你的 COS 存储桶所在的地域// 初始化 COS 客户端$cosClient = new Client(['region' => $region, // COS 服务地域'schema' => 'https', // 协议头部,默认为 http'credentials' => ['secretId' => $secretId,'secretKey' => $secretKey]]);try {// 发起创建多部分上传请求$result = $cosClient->putObject(array('Bucket' => env('COS_BUCKET_COS_APPID'), // 替换为你的 COS 存储桶名称,BucketName-Appid'Key' => $cosObjectName,   // 替换为你的对象名称,例如:test/example.jpg'Body' => base64_decode($base64Image),));// 输出的结果为标准json格式return ['code' => 200,'message' => 'success','url' => env('COS_DOMAIN') . '/' . $result['Key'],];// print_r($result);} catch (\Exception $e) {// 输出请求失败时的异常信息// echo $e->getMessage();$logger = logger();$logger->debug('文件上传请求异常信息=', ['exception' => $e, 'uniqueId' => uniqid()]);return ['code' => 500,'message' => 'fail','getMessage' => $e->getMessage(),];}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49837.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle数据库下的定时任务,如何创建Jobs

oarcle中写存储过程&#xff0c;上面的文章中已经介绍过了&#xff0c;这次是写好存储过程后&#xff0c;在Jobs文件夹中新建job,达到定时执行任务的目的。 1、在plsql数据库中&#xff0c;找到左边的Jobs,右键点击新建&#xff0c;如下图&#xff1a; 2、按照下图将相应的项添…

【Gitlab】SSH配置和克隆仓库

生成SSH Key ssh-keygen -t rsa -b 4096 私钥文件: id_rsa 公钥文件:id_rsa.pub 复制生成的ssh公钥到此处 克隆仓库 git clone repo-address 需要进行推送和同步来更新本地和服务器的文件 推送更新内容 git push <remote><branch> 拉取更新内容 git pull &…

探索 IT 新边疆:元宇宙的无限可能与挑战

目录 元宇宙的基本概念 元宇宙的无限可能 元宇宙与艺术创作 元宇宙中的社交互动 不同文化在元宇宙中的融合与冲突 文化的融合&#xff1a;元宇宙的桥梁作用 文化的冲突&#xff1a;价值观与认同的碰撞 应对策略&#xff1a;促进融合&#xff0c;化解冲突 元宇宙面临的…

LINUX高性能服务器框架

1.服务器模型&#xff1a; 1). C/S模型 &#xff1a; 此模型就是一个服务器能给多个客户端提供服务&#xff0c;但所以资源都被服务端所占有&#xff0c;客户端想要获取只能通过请求连接服务端去获取。由于客户端的请求访问是异步的&#xff0c;所以需要一个手段进行此类事件的…

android user 版本如何手动触发dump

项目需要在android user版本增加手动触发dump方法&#xff0c;用以确认user版本发生dump后系统是重启还是真正发生dump卡机&#xff01; 本文以qcom平台项目为例描述所做的修改&#xff0c;留下足迹以备后忘。 闲言少叙&#xff0c;开整上干货&#xff1a; 一、修改bin文件 …

Typescript学习笔记(2.0)

ts编译选项 tsc app.ts -w 参数-w&#xff0c;就是对app.ts进行监视&#xff0c;每次该文件改变时就会自动编译 **:任意目录 *&#xff1a;任意文件 接口 接口用来定义一个类结构&#xff0c;用来定义一个类中应该包含哪些属性和方法&#xff0c;同时接口也可以当做类型…

Profinet与以太网Ethernet的区别

在工业自动化和网络通信领域&#xff0c;Profinet和以太网Ethernet是两种常见的通信协议。尽管它们都基于以太网技术&#xff0c;但在技术规范、应用领域、通信速度和实时性、系统兼容性和互操作性以及数据处理和网络管理等方面存在显著差异。 一、技术规范和应用领域 以太网 …

爬虫基础之Web网页基础

在探讨爬虫技术的深入应用之前&#xff0c;了解Web网页的基础知识是至关重要的。Web网页是互联网上的基本构成单元&#xff0c;而爬虫则是与这些网页交互的自动化程序。本文将介绍Web网页的基础知识&#xff0c;包括HTML、CSS、JavaScript以及它们在爬虫技术中的角色。 HTML&a…

基于微信小程序的课堂考勤系统的设计与实现(论文+源码)_kaic

基于微信小程序的课堂考勤系统的设计与实现 摘 要 在高校教育普及的今天&#xff0c;学生人数日益增多&#xff0c;为保证课堂质量&#xff0c;教师多要在课前进行考勤。因此本设计提出基于微信小程序的课堂考勤系统&#xff0c;增加了定位功能&#xff0c;避免了“假打卡”…

前端开发知识(一)-html

1.前端开发需掌握的内容&#xff1a; 2.前端开发的三剑客&#xff1a;html、css、javascript Vue可以简化JavaScpript流程。 Element&#xff08;饿了么开发的&#xff09; &#xff1a;前端组件库。 Ngix&#xff1a;前端服务器。 3.前端开发工具&#xff1a;vscode 1)按…

基于Java+SpringBoot+Vue的学生心理咨询评估系统

前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 哈喽兄弟们&#xff0c;好久不见哦&#xff5…

乐尚代驾六订单执行一

加载当前订单 需求 无论是司机端&#xff0c;还是乘客端&#xff0c;遇到页面切换&#xff0c;重新登录小程序等&#xff0c;只要回到首页面&#xff0c;查看当前是否有正在执行订单&#xff0c;如果有跳转到当前订单执行页面 之前这个接口已经开发&#xff0c;为了测试&…

【MySqL数据库的基本语法】

SQL语言&#xff1a;结构化查询语言 DDL&#xff1a;数据定义语言&#xff08;create创建、drop丢弃、删除、alter修改&#xff09; DML&#xff1a;数据操纵语言&#xff08;insert添加、update、delete&#xff09; DQL&#xff1a;数据查询语言&#xff08;select、show、…

Linux嵌入式学习——数据结构——线性表的链式结构

线性表的链式存储 解决顺序存储的缺点&#xff0c;插入和删除&#xff0c;动态存储问题。 特点&#xff1a; 线性表链式存储结构的特点是一组任意的存储单位存储线性表的数据元素&#xff0c;存储单元可以是连续的&#xff0c;也可以不连续。可以被存储在任意内存未被占…

四、单线程多路IO复用+多线程业务工作池

文章目录 一、前言1 编译方法 二、单线程多路IO复用多线程业务工作池结构三、重写Client_Context类四、编写Server类 一、前言 我们以及讲完单线程多路IO复用 以及任务调度与执行的C线程池&#xff0c;接下来我们就给他结合起来。 由于项目变大&#xff0c;尝试解耦项目&#…

47.简易电压表的设计与验证(2)

&#xff08;1&#xff09;Verilog 代码&#xff1a; module adc_collect(input clk ,input reset_n ,input [7:0] adc_data ,output clk_adc );wire clk_adc_a ;…

chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上

背景: 某页面有个输入框, 用的应该是什么库里的组件, 直接修改内容不生效/机制不明确, 于是使用 paste event 粘贴到输入框, 结果发现也不行 定位: 使用 mutationObserver , 发现事件确实触发了, 输入框内容变了, 但马上又变回来了, 于是怀疑是输入框组件有做 mutationObers…

软考上岸后,我过上了周末双休的生活

很多人说这个证书考了没用&#xff0c;但在我周围的一些企业是很认可的&#xff0c;我也在考了这个证之后&#xff0c;开始换工作&#xff0c;薪资涨了2倍不说&#xff0c;还可以从事项目管理的工作&#xff0c;算是达到了职业目标。 况且这个证书还能落户&#xff0c;像有一些…

提交高通量测序处理数据到 GEO --- 操作流程

❝ 写在前面 由于最近在提交课题数据到 NCBI 数据库&#xff0c;整理了相关笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. 提交高通量测序数据到 GEO --- 说明书 2. 提交高通量测序原…

基于机器学习的二手房价格分析与预测设计与实现

概述 随着西安房地产市场的不断发展和变化&#xff0c;对二手房价格的准确预测变得至关重要。本研究旨在利用机器学习技术对西安市二手房价格进行深入分析与预测&#xff0c;通过对原始数据进行数据预处理和特征提取&#xff0c;以构建有效的预测模型。通过数据分析和可视化&a…