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.url
									uni.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(),
            ];
        }
    }
相关推荐
汤米粥38 分钟前
小皮PHP连接数据库提示could not find driver
开发语言·php
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
家里有只小肥猫6 小时前
关于vue生命周期
uni-app·uniapp
万岳软件开发小城6 小时前
外卖跑腿APP开发实战:如何基于同城O2O系统源码搭建平台
php·app开发·同城o2o系统源码·同城外卖跑腿系统源码·外卖平台开发·外卖app
数勋API8 小时前
银行卡归属地查询API接口如何用PHP调用
开发语言·云计算·php
多客软件佳佳8 小时前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友
网络安全-海哥9 小时前
【VLANPWN】一款针对VLAN的安全研究和渗透测试工具
开发语言·javascript·安全·ecmascript·php·网安入门
豆豆10 小时前
如何选择企业网站模版来搭建网站?
服务器·开发语言·前端·php·软件构建
青锐CC14 小时前
webman使用中间件验证指定的控制器及方法[青锐CC]
中间件·前端框架·php
heilai415 小时前
workerman的安装与使用
c++·websocket·http·php·phpstorm·visual studio code