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. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 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