OSS多文件上传
须要的jar包css
配置文件html
#=============================# #==== 阿里云 Oss 文件上传设置 ====# #=============================# #阿里云EndPoint# oss.endpoint= #阿里云BucketName# oss.bucketName= #阿里云 文件(图片、文档)上传路径前缀 不设置默认为空# oss.fileDir= #阿里云AccessKeyId# oss.accessKeyId= #阿里云AccessKeySecret# oss.accessKeySecret=
OSS工具类前端
package com.ctrl.aliyunOSS.Util;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.util.Date;
import com.aliyun.oss.model.*;
import com.thinkgem.jeesite.common.utils.IdGen;
import com.thinkgem.jeesite.common.utils.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import com.aliyun.oss.OSSClient;
import org.springframework.web.multipart.MultipartFile;
/**
* 使用阿里云OSS存储对象上传图片
* @author MrXiao
* @version 1.0.0
*/
@Configuration
@PropertySource("classpath:jeesite.properties")
public class OSSClientUtil {
/** 日志 */
private static Logger logger = LoggerFactory.getLogger(OSSClientUtil.class);
/** 阿里云API的内或外网域名 */
private static String endpoint;
/** 阿里云API的bucket名称 */
private static String bucketName;
/** 阿里云API的文件夹名称 */
private static String folder;
/** 阿里云API的密钥Access Key ID */
private static String accessKeyId;
/** 阿里云API的密钥Access Key Secret */
private static String accessKeySecret;
public OSSClientUtil(){
}
public OSSClientUtil(String endpoint,String bucketName, String folder,String accessKeyId,String accessKeySecret){
this.endpoint =endpoint;
this.bucketName=bucketName;
this.folder=folder;
this.accessKeyId=accessKeyId;
this.accessKeySecret=accessKeySecret;
}
/**
* 获取阿里云OSS客户端对象
*
* @return ossClient
*/
public static OSSClient getOSSClient() {
return new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
/**
* 建立存储空间
*
* @param ossClient OSS链接
* @param bucketName 存储空间
* @return
*/
public static String createBucketName(OSSClient ossClient, String bucketName) {
// 存储空间
final String bucketNames = bucketName;
if (!ossClient.doesBucketExist(bucketName)) {
// 建立存储空间
Bucket bucket = ossClient.createBucket(bucketName);
logger.info("建立存储空间成功");
return bucket.getName();
}
return bucketNames;
}
/**
* 删除存储空间buckName
*
* @param ossClient oss对象
* @param bucketName 存储空间
*/
public static void deleteBucket(OSSClient ossClient, String bucketName) {
ossClient.deleteBucket(bucketName);
logger.info("删除" + bucketName + "Bucket成功");
}
/**
* 建立模拟文件夹
*
* @param ossClient oss链接
* @param bucketName 存储空间
* @param folder 模拟文件夹名如"qj_nanjing/"
* @return 文件夹名
*/
public static String createFolder(OSSClient ossClient, String bucketName, String folder) {
// 文件夹名
final String keySuffixWithSlash = folder;
// 判断文件夹是否存在，不存在则建立
if (!ossClient.doesObjectExist(bucketName, keySuffixWithSlash)) {
// 建立文件夹
ossClient.putObject(bucketName, keySuffixWithSlash, new ByteArrayInputStream(new byte[0]));
logger.info("建立文件夹成功");
// 获得文件夹名
OSSObject object = ossClient.getObject(bucketName, keySuffixWithSlash);
String fileDir = object.getKey();
return fileDir;
}
return keySuffixWithSlash;
}
/**
* 根据key删除OSS服务器上的文件
*
* @param ossClient oss链接
* @param bucketName 存储空间
* @param folder 模拟文件夹名 如"qj_nanjing/"
* @param key Bucket下的文件的路径名+文件名 如："upload/cake.jpg"
*/
public static void deleteFile(OSSClient ossClient, String bucketName, String folder, String key) {
ossClient.deleteObject(bucketName, folder + key);
logger.info("删除" + bucketName + "下的文件" + folder + key + "成功");
}
/**
* 多图片上传
* 前端自己能够接受到MultipartFile的值
*/
// public String getURL(HttpServletRequest request){
// String url = null;
// MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
// Iterator<String> ite = mr.getFileNames();
// while (ite.hasNext()) {
// String name = ite.next();
// List<MultipartFile> file = mr.getFiles(name);
// if (file != null || file.size() != 0) {
// for (MultipartFile files : file) {
// url = getMultipartFile(files);
// }
// }
// }
// return url;
// }
/**
* 获取url路径
* */
public String getMultipartFile(MultipartFile file){
String url = null;
try {
// CommonsMultipartFile cf = (CommonsMultipartFile) file;
// DiskFileItem fi = (DiskFileItem) cf.getFileItem();
InputStream fileContent = file.getInputStream();
//最好经过file.getOriginalFilename() MultipartFile对象获取
String fileName = file.getOriginalFilename();
OSSClient ossClient = OSSClientUtil.getOSSClient();
url = OSSClientUtil.uploadFile(fileContent,ossClient,fileName,bucketName);
} catch (Exception e) {
e.printStackTrace();
}
return url;
}
/**
* 上传图片至OSS
*
* @param ossClient oss链接
* @param bucketName 存储空间
* @param fileName
* @return String 返回的惟一MD5数字签名
*/
public static String uploadFile(InputStream fileContent,OSSClient ossClient,String fileName,String bucketName) throws Exception {
//随机名处理
String resultStr = null;
String url =null;
fileName = IdGen.uuid()+ fileName.substring(fileName.lastIndexOf("."));
String path = getContentType(fileName.substring(fileName.lastIndexOf(".")));
// 建立上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(fileContent.available());
objectMetadata.setContentEncoding("utf-8");
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(path);
objectMetadata.setContentDisposition("inline;filename=" + fileName);
// 上传文件
PutObjectResult putResult =ossClient.putObject(bucketName, folder+path +"/"+ fileName, fileContent, objectMetadata);
resultStr = putResult.getETag();
// 设置URL过时时间为1小时。
Date expiration = new Date(System.currentTimeMillis()+3600*1000);
// 生成以GET方法访问的签名URL，访客能够直接经过浏览器访问相关内容。
url = ossClient.generatePresignedUrl(bucketName,folder+path +"/" + fileName, expiration).toString();
url = StringUtils.substringBefore(url,"?");
// 关闭OSSClient
ossClient.shutdown();
// 关闭io流
fileContent.close();
return url;
}
/**
* 经过文件名判断并获取OSS服务文件上传时文件的contentType
*
* @param fileName 文件名
* @return 文件的contentType
*/
public static final String getContentType(String fileName) {
String FilenameExtension = fileName.substring(fileName.lastIndexOf("."));
if (FilenameExtension.equalsIgnoreCase(".bmp")) {
return "application/x-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(".xla") ||
FilenameExtension.equalsIgnoreCase(".xlc")||
FilenameExtension.equalsIgnoreCase(".xlm")||
FilenameExtension.equalsIgnoreCase(".xls")||
FilenameExtension.equalsIgnoreCase(".xlt")||
FilenameExtension.equalsIgnoreCase(".xlw")) {
return "application/vnd.ms-excel";
}
if (FilenameExtension.equalsIgnoreCase(".xml")) {
return "text/xml";
}
if (FilenameExtension.equalsIgnoreCase(".pdf")) {
return "application/pdf";
}
if (FilenameExtension.equalsIgnoreCase(".zip")) {
return "application/zip";
}
if (FilenameExtension.equalsIgnoreCase(".tar")) {
return "application/x-tar";
}
if (FilenameExtension.equalsIgnoreCase(".avi")) {
return "video/avi";
}
if (FilenameExtension.equalsIgnoreCase(".mp4")) {
return "video/mpeg4";
}
if (FilenameExtension.equalsIgnoreCase(".mp3")) {
return "audio/mp3";
}
if (FilenameExtension.equalsIgnoreCase(".mp2")) {
return "audio/mp2";
}
return "application/octet-stream";
}
@Value("${endpoint}")
public void setEndpoint(String endpoint) {
OSSClientUtil.endpoint = endpoint;
}
@Value("${bucketName}")
public void setBucketName(String bucketName) {
OSSClientUtil.bucketName = bucketName;
}
@Value("${filePath}")
public void setFolder(String folder) {
OSSClientUtil.folder = folder;
}
@Value("${accessKeyId}")
public void setAccessKeyId(String accessKeyId) {
OSSClientUtil.accessKeyId = accessKeyId;
}
@Value("${accessKeySecret}")
public void setAccessKeySecret(String accessKeySecret) {
OSSClientUtil.accessKeySecret = accessKeySecret;
}
public static String getEndpoint() {
return endpoint;
}
public static String getBucketName() {
return bucketName;
}
public static String getFolder() {
return folder;
}
public static String getAccessKeyId() {
return accessKeyId;
}
public static String getAccessKeySecret() {
return accessKeySecret;
}
}
Controller测试类java
package com.ctrl.aliyunOSS.web;
import com.ctrl.aliyunOSS.Util.OSSClientUtil;
import com.ctrl.mobile.respUtils.AppMessage;
import com.thinkgem.jeesite.common.mapper.JsonMapper;
import com.thinkgem.jeesite.common.web.BaseController;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
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.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import java.util.LinkedHashMap;
import java.util.Map;
@Controller
@RequestMapping(value = "${frontPath}/OSSClient",method = RequestMethod.POST)
public class OSSClientUtilController extends BaseController {
@Value("${oss.endpoint}")
private String endpoint;
@Value("${oss.bucketName}")
private String bucketNames;
@Value("${oss.fileDir}")
private String filePath;
@Value("${oss.accessKeyId}")
private String accessKeyId;
@Value("${oss.accessKeySecret}")
private String accessKeySecret;
/**
* @Author liPeiMin
* @Description OSS上传图片
* @Date 2019/8/12
* @Param [file,bucketName,folder]
* @return java.lang.String
*
**/
@RequestMapping(value = "getFile",method = RequestMethod.POST)
public String saveOpinion(@RequestParam("img")MultipartFile img, HttpServletResponse response) {
OSSClientUtil ossClientUtil = new OSSClientUtil(endpoint,bucketNames,filePath,accessKeyId,accessKeySecret);
String url = ossClientUtil.getMultipartFile(img);
Map<String,Object> map = new LinkedHashMap<String, Object>();
map.put(AppMessage.MESSAGE,url);
return renderString(response, JsonMapper.toJsonString(map), "application/json");
}
//删除
//OSSClientUtil ossClientUtil = new //OSSClientUtil(endpoint,bucketNames,filePath,accessKeyId,accessKeySecret);
// OSSClient ossClient = OSSClientUtil.getOSSClient();
// String url = ctrlFile.getFileUrl();
// String path = url.substring(url.lastIndexOf(filePath));
// ossClientUtil.deleteFile(ossClient,bucketNames,path);
// addMessage(redirectAttributes, "删除文件成功");
}
传值部分jsjquery
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择文件'
},
dnd: '#uploader .queueList',
paste: document.body,
// accept: {
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
// },
// swf文件路径
swf: 'js/plugins/webuploader/Uploader.swf',
disableGlobalDnd: true,
//分页上传
chunked: true,
//服务器地址
server: 'http://localhost:8080/aiyi_platform/f/OSSClient/getFile',
//参数名
fileVal:'img', //目前用img
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
//成功回调函数
var imgArr=[];
//上传成功回调函数
uploader.on( 'uploadSuccess', function(files,response) {
var json=JSON.parse(response._raw); // 使用JSON.parse()进行解析：使用JSON对象的静态方法parse()，将字符串解析为对象。
imgArr.push(json.respMsg);
var img = $('<li ><img src="'+imgArr[imgArr.length-1]+'" style="height: 150px;width: 240px"><span id="exit">X</span></li>');
$("#imgs").append(img );
$("#url").val(imgArr)
});
//获取url回显
var url = $("#url").val();
if(url!=null && url!=""){
var urls = url.split(",");
for (var i = 0; i < urls.length; i++) {
var href = urls[i];
var img = $('<li><img src="'+href+'" style="height: 150px;width: 240px"><span id="exit">X</span></li>');
imgArr.push(urls[i]);
$("#imgs").append(img );
}
}
//删除 同时删除数组中的路径
$('#imgs').on('click',' li span',function(){
var imgArra=$(this).prev().attr('src')
for(var i=0;i<imgArr.length;i++){
if(imgArra==imgArr[i]){
imgArr.splice(i,1)
}
}
$("#url").val(imgArr);
$(this).parent().remove();
})
jsp页面部分代码web
<%@ page contentType="text/html;charset=UTF-8" %>
<script src="${ctxStatic}/jquery-fileUpload/js/webuploader.js"></script>
<script src="${ctxStatic}/jquery-fileUpload/js/jquery.sortable.js"></script>
<script src="${ctxStatic}/jquery-fileUpload/js/upload.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/jquery-fileUpload/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="${ctxStatic}/jquery-fileUpload/css/style.css" />
<style>
#imgs{
width: 980px;
height: 192px;
overflow:auto;
margin-top: 10px;
}
#imgs li{
display: inline-block;
position: relative;
height: 150px;
width: 240px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#imgs li:hover #exit{
display: block;
}
#lefts li{
/*float: left;*/
display: inline-block;
}
.item_container{
overflow:auto;
}
#exit{
font-size: 16px;
text-align: center;
display: block;
width: 22px;
line-height: 22px;
border-radius: 50%;
background-color: red;
color: #ffffff;
position: absolute;
top: 5px;
right: 5px;
display: none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#exit:hover{
cursor: pointer;
}
#exit:active{
background-color: #ff570a;
color: #555555;
}
</style>
<ul id="lefts">
<li>
<div class="width_auto" style="width:532px">
<div id="container">
<!--头部，相册选择和格式选择-->
<div id="uploader" >
<div class="item_container" style="height: 194px">
<div id="" class="queueList" >
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
</div>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<ul id="imgs"></ul>
</li>
</ul>
<%@ include file="/WEB-INF/views/ctrl/aliyunOSS/aliyunOSS.jsp"%>
<form:hidden id="url" path="pictureId" htmlEscape="false" maxlength="255" class="input-xlarge"/>
相关文章
- 1. OSS文件上传
- 2. OSS上传文件 组件
- 3. 阿里oss文件上传
- 4. Aliyun Oss 上传文件
- 5. OSS上传文件(二)
- 6. oss+上传文件夹
- 7. java -oss 文件上传
- 8. oss上传文件夹
- 9. Vue上传文件到OSS
- 10. laravel-admin 文件上传oss
- 更多相关文章...
- • PHP 文件上传 - PHP教程
- • R XML 文件 - R 语言教程
- • Flink 数据传输及反压详解
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. OSS文件上传
- 2. OSS上传文件 组件
- 3. 阿里oss文件上传
- 4. Aliyun Oss 上传文件
- 5. OSS上传文件(二)
- 6. oss+上传文件夹
- 7. java -oss 文件上传
- 8. oss上传文件夹
- 9. Vue上传文件到OSS
- 10. laravel-admin 文件上传oss