网站实现上传图片到oss对象存储
应用示例：用户头像更换
欢迎访问个人博客 点击访问 可回答问题下载资源
网上很多方法是将上传的头像存在项目的根目录下，但是时间长了肯定影响项目的运行速度。
阿里云的oss和腾讯云的cos提供了对象存储服务，而且价格不贵，企业开发者和个人开发者都适合
本篇介绍的是阿里云的oss对象存储。
第一步
申请阿里云账号，登录账号后找到oss对象存储。
阿里云的对象存储是需要自己购买的，40G一年的空间只需要9块钱，40G的存储空间能满足大多数个人开发者的需求啦，对于企业可以选择更高存储容量的。
第二步
购买完存储容量后就需要设置Bucket，就相当于设置一个存储盘，在bucket中可以新建文件夹。阿里云和腾讯云都提供了对象存储的开发文档，写的都很详细。阿里oss文档 腾讯cos文档
接下来就是前端样式和后端代码
前端样式
上传头像的界面也已经设计好啦
样式截图，这是在图书管理系统中的更换头像应用，博客链接：图书管理系统
下面这个是在手机网站中的界面，原网站是参加软件设计大赛的校园场景识别。网站链接：场景识别
需要的js文件css文件都放在了这个压缩包里：jscss文件
也可以进入网站联系群主即可：加群联系群主
前端代码以及上传图片的限制
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="head/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link href="head/cropper.min.css" rel="stylesheet">
<link href="head/sitelogo.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script src="head/bootstrap.min.js"></script>
<script src="head/cropper.js"></script>
<script src="head/sitelogo.js"></script>
<style type="text/css">
.avatar-btns button {
height: 35px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>
<div class="user_pic" style="margin: 10px;">
<img src=""/>
</div>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
<form class="avatar-form" action="../../upload" method="post" enctype="multipart/form-data">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<label for="avatarInput" style="line-height: 35px;">图片上传</label>
<button class="btn btn-danger" type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
<span id="avatar-name"></span>
<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg" id="imageHead"></div>
<!--<div class="avatar-preview preview-md"></div>
<div class="avatar-preview preview-sm"></div>-->
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-4">
<div class="btn-group">
<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
</div>
<div class="btn-group">
<button class="btn btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
</div>
</div>
<div class="col-md-5" style="text-align: right;">
<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")">
</span>
</button>
<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)">
<!--<span class="fa fa-search-plus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)">
<!--<span class="fa fa-search-minus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214">
</button>
</div>
<div class="col-md-3">
<input class="btn btn-danger btn-block avatar-save fa fa-save" type="submit" value="上传头像"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
<script src="head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//做个下简易的验证 大小 格式
$('#avatarInput').on('change', function(e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;
if(Size > filemaxsize) {
alert('图片过大，请重新选择!');
$(".avatar-wrapper").childre().remove;
return false;
}
if(!this.files[0].type.match(/image.*/)) {
alert('请选择正确的图片!')
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
}
});
$(".avatar-save").on("click", function() {
var img_lg = document.getElementById('imageHead');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/jpeg");
var newImg = document.createElement("img");
newImg.src = dataUrl;
imagesAjax(dataUrl)
}
});
})
function imagesAjax(src) {
var data = {};
data.img = src;
data.jid = $('#jid').val();
$.ajax({
url: "upload-logo.php",
data: data,
type: "POST",
dataType: 'json',
success: function(re) {
if(re.status == '1') {
$('.user_pic img').attr('src',src );
}
}
});
}
</script>
</body>
</html>接下来就是后端，便于理解，后端采用的是servlet接收图片数据，并存储到项目的虚拟路径，然后经过编码上传到oss服务器。
因为可能涉及到历史头像问题，上传文件名采用随机编码，防止重名替换了原始头像。
servlet代码
package userhead;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import com.oreilly.servlet.multipart.FileRenamePolicy;
/**
* Servlet implementation class upload
*/
@WebServlet("/upload")
public class upload extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public upload() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String filename = null;
String url = null;
String requextip = request.getRemoteAddr();
String saveDirectory = this.getServletContext().getRealPath("") + "\\img";
File savedir = new File(saveDirectory);
if (!savedir.exists())
savedir.mkdir();
int maxPostSize = 10 * 1024 * 1024;
FileRenamePolicy policy = (FileRenamePolicy) new DefaultFileRenamePolicy();
MultipartRequest multi;
multi = new MultipartRequest(request, saveDirectory, maxPostSize, "UTF-8", policy);
Enumeration<String> files = multi.getFileNames();
String name = files.nextElement();
File f = multi.getFile(name);
if (f != null) {
filename = f.getName();
}
InputStream in = new FileInputStream(f);
BasicController al = new BasicController();
url = al.uploadImageToOSS(filename, in);
request.setAttribute("url", url);
request.getRequestDispatcher("/upload_head.jsp").forward(request, response);
doGet(request, response);
}
}
上面这是接收图片的方法，BasicController类即为上传到oss的类
代码如下
package userhead;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.PutObjectRequest;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.net.URL;
import java.sql.Date;
import java.util.Arrays;
import java.util.Iterator;
import java.util.UUID;
import java.util.concurrent.ConcurrentLinkedQueue;
public class BasicController {
private static String endpoint = "申请的oss区域域名";
private static String accessKeyId = "申请的accesskeyid";
private static String accessKeySecret = "申请的accesskeysecret";
private static String bucketName = "自己创建的bucket名称（大小写要规范）";
private static String folder = "自己创建文件夹名称/";
private static String key = "http://【bucket名称】.【区域域名】/";
public BasicController() {
}
public String uploadImageToOSS(String fileName, InputStream inputStream) {
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
try {
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
String[] names = fileName.split("[.]");
String name = uuid + "." + names[names.length - 1];
ossClient.putObject(new PutObjectRequest(bucketName, folder + name, inputStream));
return key + folder + name;
} catch (Exception e) {
e.printStackTrace();
System.err.println(e.getMessage());
} finally {
ossClient.shutdown();
}
return null;
}
}所需要的jar包，已经放到csdn可直接下载。jar包下载
按照这样就可以实现web应用的图片上传服务器啦
