微信小程序+SpringBoot实现图片上传到OSS服务器

在这里插入图片描述

前言

图片上传到服务器，可以变成公共访问的资源。这样在手机调试的时候，也可以加载图片资源。如果将图片保存到电脑本地，则用手机调试看不到相关图片信息。只需要将图片的访问地址保存到数据库即可。

大致过程：1、有OSS服务。2、集成到自己的项目中。3、调用相关方法即可。

详细文章~

实现效果

1、手机效果演示地址 2、实现过程说明

在这里插入图片描述

1.1 配置pom文件

<!— 阿里云 OSS 选择合适的版本—>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun–sdk–oss</artifactId>
<version>3.10.2</version>
</dependency>

1.2 .yml配置文件

这里将相关参数填入即可

alioss:
# 阿里云 OSS 地域节点
endpoint: your info endpoint
# AccessKey ID
access–key–id: your info id
# AccessKey Secret
access–key–secret: your info secret
# Bucket 名称
bucket–name: your info bucket

服务器配置关键参数

AccessKey ID 和 AccessKey Secret

获取路径：
- 登录后，在右上角点击你的账号头像，选择 “AccessKey管理” 或直接访问 AccessKey 管理页面.
- 创建一个新的 AccessKey，或者使用已有的 AccessKey，记下 AccessKey ID 和 AccessKey Secret。、

Endpoint (地域节点)

获取路径：
- a. 打开 OSS 管理控制台.
- b. 找到你的存储空间（Bucket）。
- c. 点击存储空间名称，进入其详情页面。
- d. 在页面顶部或基础信息部分，查看 “外网访问域名” 或 “地域节点”。例如：oss-cn-hangzhou.aliyuncs.com。

Bucket 名称

获取路径：
- a. 在 OSS 控制台，查看你创建的存储空间（Bucket）的名称。
- b. Bucket 名称就是你存储空间的唯一标识。例如：my-bucket-name。

1.3 读取配置并初始化客户端

package com.online.ceshi.config.common;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
/**
* @Author: author
* @CreateTime: 2024-12-17 16:37
* @Description: TODO
* @Version: 1.0
*/

@Data
@Component
public class AliOSSUtil {

@Value("${alioss.endpoint}")
private String endpoint;

@Value("${alioss.access-key-id}")
private String accessKeyId;

@Value("${alioss.access-key-secret}")
private String accessKeySecret;

@Value("${alioss.bucket-name}")
private String bucketName;

public OSS getOSSClient() {
// 创建 OSS 客户端
return new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
}
}

1.4 实际应用

import cn.hutool.core.io.FileUtil;
import com.aliyun.oss.OSS;
import com.aliyun.oss.model.PutObjectRequest;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.online.ceshi.config.common.AliOSSUtil;
import com.online.ceshi.config.response.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.IOException;

/**
* @Author: author
* @CreateTime: 2024-12-17 16:39
* @Description: TODO
* @Version: 1.0
*/
@RestController
public class AliOSSService {
@Autowired
private AliOSSUtil aliOSSUtil;

/**
* 小程序用户修改头像
*
* @param
* @return
*/
@RequestMapping(value = "/updateUserInfoImageApp", method = RequestMethod.POST)
public Result updateUserImageApp(@RequestParam Long userId,
@RequestParam MultipartFile file) throws IOException {

Long userID = userId;
String originName = file.getOriginalFilename();

//获取上传的文件的原始名称
String fileName = FileUtil.mainName(originName) + System.currentTimeMillis() + "." + FileUtil.extName(originName);
try {
//返回文件上传路径
String uploadPath = upload(file.getBytes(), fileName);
return Result.ok().data("fileName", uploadPath);
} catch (IOException e) {
e.printStackTrace();
}
return Result.error();
}

/**
* @description: 字节数组的形式上传文件
* @author: author
* @date: 2024/12/17 16:54
* @param: [bytes, objectName]
* @return: java.lang.String
**/
public String upload(byte[] bytes, String objectName) {
OSS ossClient = aliOSSUtil.getOSSClient();

try (ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(bytes)) {
// 上传文件（通过字节输入流）
PutObjectRequest putObjectRequest = new PutObjectRequest(
aliOSSUtil.getBucketName(),
objectName,
byteArrayInputStream
);
ossClient.putObject(putObjectRequest);

// 拼接访问地址
String fileUrl = "https://" + aliOSSUtil.getBucketName() + "." + aliOSSUtil.getEndpoint() + "/" + objectName;
System.out.println("文件上传成功！访问地址：" + fileUrl);

return fileUrl;
} catch (Exception e) {
e.printStackTrace();
return null;
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}

}

1.5 前端相关

uploadImage(filePath, userId) {
wx.uploadFile({
url: 'http://XXXXXX:XXXX/updateUserInfoImageApp', // 替换为服务器的上传接口
filePath: filePath,
name: 'file', // 后端接收文件的字段名
formData: {
userId: userId
},
header: {
'token': `${wx.commonUtil.getToken()}`
},
success: (res) => {
console.log('上传成功', res);
const response = JSON.parse(res.data);
const fileName = response.data.fileName;
console.log('上传成功666', fileName);
// 根据后端返回更新头像 URL
if (fileName) {
this.setData({
avatarUrl: fileName,
'userInfo.imageUrl': fileName
});
} else {
wx.showToast({
title: '上传失败，请重试',
icon: 'none'
});
}
},
fail: (err) => {
console.error("上传失败", err);
wx.showToast({
title: '上传失败，请重试',
icon: 'none'
});
}
});
},

在这里插入图片描述

微信小程序+SpringBoot实现图片上传到OSS服务器

前言