如何实现照片文件上传至阿里云

• 阿里云地址链接:https://www.aliyun.com/

配置

• 在自己的application.properties中添加以下信息
• 配置springboot上传文件限制大小

# 文件上传限制
spring.servlet.multipart.max-file-size=500MB
spring.servlet.multipart.max-request-size=500MB

创建阿里云bucket

• 登陆阿里云网站,在产品中找到对象存储OSS点击
  
• 开通完成后进入控制台
  
• 创建Bucket 用于存储文件
  
• 点击列表即可查看自己的bucket
  

前端操作演示

• 点击浏览按钮,即可选择本地的照片上传,上传后则将此文件作为参数请求访问后端接口了
  

• 即可将文件上传至阿里云中查看
  

后端部分

控制器

使用到的文件上传工具类(重点)

• 这里有4处需要自己更改的地方(代码中为xxxx的部分)
• 1.域名,2.endpoint,3.accessKeyId 和accessKeySecret ,4.自己创建的Bucket名
• 每个人根据自己的数据填写即可,如果查看这些数据请看下方介绍

/**
 * 文件上传工具
 */
public class UploadUtil {
	//阿里域名
	public static final String ALI_DOMAIN = "https://xxx.oss-cn-xxxxx.aliyuncs.com/";

	public static String uploadAli(MultipartFile file) throws Exception {
		//生成文件名称
		String uuid = UUID.randomUUID().toString();
		String orgFileName = file.getOriginalFilename();//获取真实文件名称 xxx.jpg
		String ext= "." + FilenameUtils.getExtension(orgFileName);//获取拓展名字.jpg
		String fileName =uuid + ext;//xxxxxsfsasa.jpg

		// Endpoint以杭州为例，其它Region请按实际情况填写。
		String endpoint = "oss-cn-xxxxx.aliyuncs.com";
		// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，
		// 请登录 https://ram.console.aliyun.com 创建。
		String accessKeyId = "xxxxxxxxxxxxxxxxxxxx";
		String accessKeySecret = "xxxxxxxxxxxxxxxxxxxxxxxxx";
		// 创建OSSClient实例。
		OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId,accessKeySecret);
		// 上传文件流。
		ossClient.putObject("xxxxxxxxxx", fileName, file.getInputStream());
		// 关闭OSSClient。
		ossClient.shutdown();
		return ALI_DOMAIN + fileName;
	}


}

如何在阿里云查找java代码所需的信息

bucket名

• 点击bucket列表,即可查看bucket名,选择你要使用的bucket的bucket名写在后端即可
  

域名和endpoint

• 进入bucket列表 点击自己要作为文件上传存储的bucket中去,点击概览,下方即可查看,域名和endpoint 的数据都在那一块
• 使用外网行数据
  

accessKeyId和accessKeySecret

• 鼠标移至网页右上方的头像,即可查看信息列表,点击此处的AccessKey管理即可查看相应的accessKeyId和accessKeySecret数据

拓展:如何使用ckeditor插件创建富文本框-图片上传至阿里云

准备

• ckeditor插件官方地址:https://ckeditor.com/
• 可在我资源下寻找并下载此插件
• 引入相关文件
  

富文本框代码演示

• 此演示的是在form表单内的富文本框,name属性根据自己需求写
• id是要对应js代码部分的

 <textarea id="content" name="xxx" class="ckeditor">${(回显数据)!}</textarea>

js代码部分

• 此代码的content 与富文本框的id对应
• filebrowserUploadUrl属性值写此富文本框内添加图片作为参数要访问的接口(将图片上传至阿里云)

 //富文本框图片配置
            var ck = CKEDITOR.replace( 'content',{
                filebrowserBrowseUrl: '/图片服务器，假装这里有',
                filebrowserUploadUrl: '/uploadImg_ck'
            });

后端接口部分

• 参数名必须是upload,这是插件的约定

@RequestMapping("/uploadImg_ck")
    @ResponseBody
    public Object uploadImg_ck(MultipartFile upload) throws Exception {
        Map<String, Object> map = new HashMap<String, Object>();
        String imagePath= null;
        if(upload != null && upload.getSize() > 0){
            try {
                //图片保存, 返回路径
                imagePath =  UploadUtil.uploadAli(upload);
                //表示保存成功
                map.put("uploaded", 1);
                map.put("url",imagePath);
            }catch (Exception e){
                e.printStackTrace();
                map.put("uploaded", 0);
                Map<String, Object> mm = new HashMap<String, Object>();
                mm.put("message",e.getMessage() );
                map.put("error", mm);
            }
        }
        return map;
    }