大型网站架构中,资源存储是十分重要的,网站肯定会涉及到文件上传、图片上传等资源存储操作,而在网站用户量不断增长的同时,网站的资源存储也会越来越大的耗费服务器硬盘,一般架构会单独设立静态资源服务器,但是如果是电商网站架构初期,T级别的服务器也是非常昂贵的,就此阿里看到了商机,把自己用于淘宝的资源存储oss方案用于商用,用户可以注册购买oss服务,然后通过调用阿里oss api将自己的静态资源存储到oss上。
阿里oss产品介绍:
阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量、安全、低成本、高可靠的云存储服务。您可以通过调用 API,在任何应用、任何时间、任何地点上传和下载数据,也可以通过 Web 控制台对数据进行简单的管理。OSS 适合存放任意类型的文件,适合各种网站、开发企业及开发者使用。
OSS与自建存储对比
方便、快捷的使用方式
- 提供标准的RESTful API接口、丰富的SDK包、客户端工具、控制台。您可以像使用文件一样方便地上传、下载、检索、管理用于Web网站或者移动应用的海量数据。
- 不限文件数量和大小。您可以根据所需存储量无限扩展存储空间,解决了传统硬件存储扩容问题。
- 支持流式写入和读出。特别适合视频等大文件的边写边读业务场景。
- 支持数据生命周期管理。您可以自定义将到期数据批量删除或者转入到低成本的归档服务。
强大、灵活的安全机制
- 灵活的鉴权,授权机制。提供STS和URL鉴权和授权机制,以及白名单、防盗链、主子账号功能。
- 提供用户级别资源隔离机制和多集群同步机制(可选)。
丰富、强大的增值服务
- 图片处理:支持jpg、png、bmp、gif、webp、tiff等多种图片格式的转换,以及缩略图、剪裁、水印、缩放等多种操作。
- 音视频转码:提供高质量、高速并行的音视频转码能力,让您的音视频文件轻松应对各种终端设备。
- 内容加速分发:OSS作为源站,搭配CDN进行加速分发,具有稳定、无回源带宽限制、性价比高、一键配置的特点。
下面讲一下上传调用OSS:
模拟需求:
信息维护,可以修改信息,其中包括两项图片处理:1.公众号二维码图片上传。 2.logo上传。
前台页面代码:
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>管理</title>
</head>
<body>
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
<small>
修改
</small>
</h1>
<ol class="breadcrumb">
<li><a href="${ctx}"><i class="fa fa-dashboard"></i> 首页</a></li>
<li class="active">
信息
</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<c:if test="${message != null && message != ''}">
<div class="alert alert-info" style="margin-top:20px;">
<button type="button" class="close" data-dismiss="alert">×</button>
${message}
</div>
</c:if>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header"></div>
<!-- form start -->
<form id="inputForm" class="form-horizontal" action="${ctx}/org/hospital/update" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${entity.id }"/>
<input type="hidden" name="token" value="${entity.token }"/>
<input type="hidden" name="status" value="${entity.status }"/>
<input type="hidden" id="logoUrl" name="logoUrl" value="${entity.logoUrl}"/>
<input type="hidden" id="codeUrl" name="codeUrl" value="${entity.codeUrl}"/>
<div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-3">
<input id="name" name="name" value="${entity.name }" type="text" class="form-control required" readonly="readonly"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">地址</label>
<div class="col-sm-3">
<input name="address" value="${entity.address }" type="text" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">电话</label>
<div class="col-sm-3">
<input name="telphone" value="${entity.telphone }" type="text" class="form-control required number" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">logo图片</label>
<div class="col-sm-5">
<input type="file" name="logoFile" id="logoFile">
<a href="javascript:uploadFile();" class="btn btn-primary">上传</a>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">logo缩略图</label>
<div class="col-sm-3">
<c:if test="${empty entity.logoUrl}">
<img id="logo_img" alt="" src="${ctx }/static/images/no_pro.jpg" width="40px" height="40px"/>
</c:if>
<c:if test="${!empty entity.logoUrl}">
<img id="logo_img" alt="" src="${entity.logoUrl}" width="40px" height="40px"/>
</c:if>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">微信二维码</label>
<div class="col-sm-5">
<input type="file" name="codeFile" id="codeFile">
<a href="javascript:uploadCodeFile();" class="btn btn-primary">上传</a>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">二维码缩略图</label>
<div class="col-sm-3">
<c:if test="${empty entity.codeUrl}">
<img id="code_img" alt="" src="${ctx }/static/images/no_pro.jpg" width="140px" height="140px"/>
</c:if>
<c:if test="${!empty entity.codeUrl}">
<img id="code_img" alt="" src="${entity.codeUrl}" width="140px" height="140px"/>
</c:if>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">简介</label>
<div class="col-sm-3">
<textarea class="form-control" name="summary">${entity.summary }</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<shiro:hasPermission name="hospital:update">
<button id="submit" class="btn btn-primary">提交</button>
<a href="${ctx}/" class="btn btn-default">取消</a>
</shiro:hasPermission>
</div>
</div>
</form>
<div class="box-footer clearfix"></div>
</div>
</div>
</div>
</section>
<!-- /.content -->
<script type="text/javascript">
$(document).ready(function() {
$("#inputForm").validate();
//$('#fileButton').click(function (){
//})
});
function uploadFile(){
//alert();
//判断是否有选择上传文件
var imgPath = $("#logoFile").val();
if (imgPath == "") {
layer.alert("请选择上传图片!");
return;
}
//判断上传文件的后缀名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
layer.alert("请选择图片文件!");
return;
}
$("#inputForm").ajaxSubmit({
type: "POST",
url:"${ctx}/org/hospital/uploadLogo",
dataType: "text",
success: function(data){
//alert(11111);
if(data == ""){
layer.alert("上传失败,请检查网络后重试");
return;
}
$("#logoUrl").val(data);
$("#logo_img").prop("src",data);
layer.alert("上传成功");
//layer.alert(data);
}
});
}
function uploadCodeFile(){
//alert();
//判断是否有选择上传文件
var imgPath = $("#codeFile").val();
if (imgPath == "") {
layer.alert("请选择上传图片!");
return;
}
//判断上传文件的后缀名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
layer.alert("请选择图片文件!");
return;
}
$("#inputForm").ajaxSubmit({
type: "POST",
url:"${ctx}/org/hospital/uploadCode",
dataType: "text",
success: function(data){
if(data == ""){
layer.alert("上传失败,请检查网络后重试");
return;
}
$("#codeUrl").val(data);
$("#code_img").prop("src",data);
layer.alert("上传成功");
//layer.alert(data);
}
});
}
</script>
</body>
</html>
springmvc 代码:
阿里云OSS工具类代码OSSUtil
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Date;
import java.util.Random;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
/**
* 阿里云 OSS文件类
*
* @author gshen
*/
public class OSSUtil {
Log log = LogFactory.getLog(OSSUtil.class);
// endpoint以杭州为例,其它region请按实际情况填写
// http://oss-cn-beijing.aliyuncs.com/
private String endpoint = "oss url";
// accessKey请登录https://ak-console.aliyun.com/#/查看
private String accessKeyId = "accessKeyId";
private String accessKeySecret = "accessKeySecret";
//空间
private String bucketName = "gshen_workspace";
//文件存储目录
private String filedir = "data/";
private OSSClient ossClient;
public OSSUtil() {
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
/**
* 初始化
*/
public void init() {
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
/**
* 销毁
*/
public void destory() {
ossClient.shutdown();
}
/**
* 上传图片
*
* @param url
*/
public void uploadImg2Oss(String url) {
File fileOnServer = new File(url);
FileInputStream fin;
try {
fin = new FileInputStream(fileOnServer);
String[] split = url.split("/");
this.uploadFile2OSS(fin, split[split.length - 1]);
} catch (FileNotFoundException e) {
throw new RuntimeException("图片上传失败");
}
}
public String uploadImg2Oss(MultipartFile file) {
if (file.getSize() > 1024 * 1024 * 5) {
throw new RuntimeException("上传图片大小不能超过5M!");
}
String originalFilename = file.getOriginalFilename();
String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
Random random = new Random();
String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
try {
InputStream inputStream = file.getInputStream();
this.uploadFile2OSS(inputStream, name);
return name;
} catch (Exception e) {
throw new RuntimeException("图片上传失败");
}
}
/**
* 获得图片路径
*
* @param fileUrl
* @return
*/
public String getImgUrl(String fileUrl) {
if (!StringUtils.isEmpty(fileUrl)) {
String[] split = fileUrl.split("/");
return this.getUrl(this.filedir + split[split.length - 1]);
}
return null;
}
/**
* 上传到OSS服务器 如果同名文件会覆盖服务器上的
*
* @param instream 文件流
* @param fileName 文件名称 包括后缀名
* @return 出错返回"" ,唯一MD5数字签名
*/
public String uploadFile2OSS(InputStream instream, String fileName) {
String ret = "";
try {
//创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
//上传文件
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
ret = putResult.getETag();
} catch (IOException e) {
log.error(e.getMessage(), e);
} finally {
try {
if (instream != null) {
instream.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return ret;
}
/**
* Description: 判断OSS服务文件上传时文件的contentType
*
* @param FilenameExtension 文件后缀
* @return String
*/
public static String getcontentType(String FilenameExtension) {
if (FilenameExtension.equalsIgnoreCase("bmp")) {
return "image/bmp";
}
if (FilenameExtension.equalsIgnoreCase("gif")) {
return "image/gif";
}
if (FilenameExtension.equalsIgnoreCase("jpeg") ||
FilenameExtension.equalsIgnoreCase("jpg") ||
FilenameExtension.equalsIgnoreCase("png")) {
return "image/jpeg";
}
if (FilenameExtension.equalsIgnoreCase("html")) {
return "text/html";
}
if (FilenameExtension.equalsIgnoreCase("txt")) {
return "text/plain";
}
if (FilenameExtension.equalsIgnoreCase("vsd")) {
return "application/vnd.visio";
}
if (FilenameExtension.equalsIgnoreCase("pptx") ||
FilenameExtension.equalsIgnoreCase("ppt")) {
return "application/vnd.ms-powerpoint";
}
if (FilenameExtension.equalsIgnoreCase("docx") ||
FilenameExtension.equalsIgnoreCase("doc")) {
return "application/msword";
}
if (FilenameExtension.equalsIgnoreCase("xml")) {
return "text/xml";
}
return "image/jpeg";
}
/**
* 获得url链接
*
* @param key
* @return
*/
public String getUrl(String key) {
// 设置URL过期时间为10年 3600l* 1000*24*365*10
Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
if (url != null) {
return url.toString();
}
return null;
}
}
图片上传成功后预览:
分享到:
相关推荐
OSS是阿里云提供的一个高可用、高可靠、低成本的对象存储服务。它支持海量数据的存储和访问,广泛应用于图片和视频托管、大数据分析、备份与恢复等领域。C-SDK是为开发者提供的一套接口,使得开发者能够通过C语言...
阿里云OSS(Object Storage Service)是阿里云提供的一个高可用、高可靠、低成本的云存储服务,适用于海量数据的存储和访问。针对WordPress这样的内容管理系统,aliyun-oss-support插件提供了无缝集成,使用户能够将...
通过上述介绍,我们可以看到,在JEESZ分布式架构中集成阿里云OSS存储功能时,不仅定义了清晰的服务接口,而且也实现了高效的文件上传和管理逻辑。这种设计模式有助于提升系统的灵活性和扩展性,同时也保证了良好的...
阿里云对象存储服务OSS(Object Storage Service)是一种大规模、高可用、安全可靠且成本效益高的云存储解决方案。本文档主要介绍了如何利用OSS构建移动应用数据直传服务的最佳实践,旨在帮助开发者在30分钟内快速...
1. **文件上传**:用户可以通过简单的拖放或者选择文件,将本地的文件或文件夹上传到阿里云OSS存储空间。 2. **文件下载**:选择存储桶内的文件或文件夹,点击下载按钮,即可将云端数据下载到本地。 3. **文件预览**...
阿里云OSS(Object Storage Service)是一款面向互联网和企业级应用设计的分布式存储服务,提供高可用、高可靠、低成本的数据存储能力。C-SDK是阿里云为开发者提供的C语言接口,使得用户能够通过C语言方便地进行OSS...
阿里云对象存储服务OSS(Object Storage Service)是一种大规模、低成本、高可靠的云存储服务,适合于存储大量的非结构化数据,如图片、视频、文档等。本最佳实践旨在指导开发者如何在30分钟内快速搭建一个基于OSS的...
阿里云对象存储服务(OSS)是阿里云提供的大规模、低成本、高可靠的云存储服务,广泛应用于数据备份、媒体分发、大数据分析等场景。针对嵌入式设备或物联网(IoT)应用,可能需要在资源有限的ARM平台上运行与OSS交互...
1. **对象管理**:通过插件,开发者可以直接在Eclipse中浏览、创建、删除、重命名OSS存储空间(Bucket)中的对象(Object)。 2. **快速上传**:支持批量上传本地文件到OSS,同时也可以选择整个目录进行上传,大大...
阿里云对象存储服务(Object Storage Service,简称OSS),是一种基于互联网的分布式存储服务,能够提供高可用、高可靠、低成本的数据存储能力。在嵌入式设备或物联网(IoT)场景中,开发者可能需要在资源有限的ARM...
为了方便用户在Windows操作系统上对OSS存储的数据进行上传、下载和管理,阿里云开发了“阿里云oss对象存储上传管理工具”。 这款名为“阿里云oss对象存储上传管理工具”的应用,特别为Windows 32位系统设计,文件名...
* 对象存储OSS的技术架构基于分布式存储系统,采用多级存储架构,实现高可用性和高性能的存储服务。 * 对象存储OSS的存储系统采用分布式文件系统,实现高效的数据存储和检索。 三、存储系统 * 对象存储OSS的存储...
"oss-browser-darwin-x64.zip" 是一个针对苹果Mac OS X(Darwin)操作系统64位架构的阿里云对象存储服务(OSS)浏览器的压缩文件。这个软件工具主要用于方便用户管理和操作阿里云OSS上的数据。下面将详细阐述相关...
阿里云是全球领先的云计算及人工智能科技公司,提供一系列丰富的云端基础设施服务。在设计和规划基于阿里云的网络服务架构时,使用专业且直观的图表工具至关重要。"阿里云产品图标visio图元素网络服务架构"就是一个...
该客户端通常包含上传、下载、删除、重命名、移动和复制文件或文件夹等功能,支持批量操作,帮助用户简化对OSS存储空间的管理工作。用户可以通过它浏览、搜索存储在OSS中的对象,并进行权限管理,如设置公共读取、...
### 阿里云体系架构概述 #### 一、阿里云技术架构介绍 ...综上所述,阿里云的技术架构涵盖了从硬件基础到应用服务的全方位设计,通过不断优化和完善各个组件,为用户提供全面而可靠的云计算解决方案。
本文档详细介绍了阿里云对象存储OSS产品的功能、特点、优势和使用指南。 一、法律声明 阿里云提醒用户在阅读或使用本文档之前务必仔细阅读、充分理解本法律声明各条款的内容。如果用户阅读或使用本文档,视为对本...
在使用对象存储OSS时,用户需要遵守阿里云的法律声明和使用条款,包括尊重阿里云的知识产权、不得擅自使用或传播阿里云的商标、商号、商标、产品或服务名称等。 在本文档中,阿里云还提供了对象存储OSS的通用约定,...
阿里云产品手册2022-2023版详细介绍了阿里云提供的广泛产品和服务,旨在为用户构建安全、高效、灵活的云计算解决方案。作为全球领先的云计算及人工智能科技公司,阿里云的产品线涵盖了从基础设施服务到高级数据分析...