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(),];}}