1.首先前端放入获取上传的组件
微信小程序uview组件：
/components/upload.html
vue所使用的element组件：
/#/zh-CN/component/upload
上面一个是微信小程序的上传，一个是普通浏览器的前端上传组件的代码出处。
后端我们需要一个阿里云的依赖，这个依赖是工具包用的。
<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>
接下来需要配置yaml文件
aliyun:oss:file:endpoint: oss-cn-（区域：上海、北京等，用拼音表达，注意这个括号是不存在的）.keyId: 开通oss服务时生成的keyIdkeySecret: 开通oss服务时生成的keySecretdirName: 阿里云上传图片路径的文件名比如：/avatarbucketName: bucketName
这些去哪里获取，如何开通
（1）开通OSS服务
去阿里云打开oss管理控制台开通
然后创建Bucket存储空间
创建文件夹上传图片
在头像中，点击“AccessKey管理”进行RAM设置
选择使用子用户
创建用户组：
添加用户
添加用户到用户组
设置权限
获取子用户AccessKeyId,AccessKeySecret
这样就获取到了ymal所以的配置信息。
接下里就是后端程序代码和两个工具类：
上传方法：
@Resourceprivate OSSUtils ossUtils;
@PostMapping("/upload")public BaseResult upload(MultipartFile file)throws IOException{System.out.println("dadadadaad");InputStream is = file.getInputStream();String path = ossUtils.uploadToOSS(file);if (file.getSize()>1048576){return BaseResult.error("图片不得大于1M");}paths=path;return BaseResult.ok("上传成功",path);}
两个工具类：
package com.czxy.oss;import lombok.Data;import org.springframework.boot.context.properties.ConfigurationProperties;import org.ponent;@Component@ConfigurationProperties(prefix="aliyun.oss.file")@Datapublic class OSSProperties {private String endpoint;private String keyId;private String keySecret;private String dirName;private String bucketName;}
package com.czxy.oss;import com.aliyun.oss.OSS;import com.aliyun.oss.OSSClientBuilder;import org.ponent;import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource;import java.util.UUID;/*** @author 桐叔* @email liangtong@*/@Componentpublic class OSSUtils {@Resourceprivate OSSProperties ossProperties;/*** 上传到OSS* @param file 上传文件* @return 上传后的路径*/public String uploadToOSS(MultipartFile file) {try {// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(ossProperties.getEndpoint(), ossProperties.getKeyId(), ossProperties.getKeySecret());//System.currentTimeMillis() //毫秒值String name = UUID.randomUUID().toString().replace("-", ""); //32长度// 截取图片的扩展名 mm.jpgString[] arr = file.getOriginalFilename().split("\\.");// 路径String path = ossProperties.getDirName() + "/" + name + "." + arr[1];// 上传图片ossClient.putObject(ossProperties.getBucketName(), path , file.getInputStream());// 关闭OSSClient。ossClient.shutdown();//https://czxy-lt.oss-cn-/avatar/b9c4d0a19b1d48eb89d9ff61284f83d6.jpgreturn "https://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;} catch (Exception e) {throw new RuntimeException("上传OSS异常");}}}
其中微信小程序的前端代码与平时的vue不同，大家可以参考微信官方文档。
