WebUploader實(shí)現(xiàn)圖片上傳功能
更新時(shí)間：2021年03月14日 11:11:02 作者：甜曉楓
這篇文章主要為大家詳細(xì)介紹了WebUploader實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了WebUploader實(shí)現(xiàn)圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下
描述：springmvc 在jsp頁(yè)面實(shí)現(xiàn) WebUploader插件上傳圖片, 上傳到 oss阿里云存儲(chǔ)上。
預(yù)覽：
理解： 前端 WebUploader插件（這個(gè)得去看官網(wǎng)）調(diào)起后臺(tái),后臺(tái) request 接收文件參數(shù)，
重新拼裝圖片url，oss創(chuàng)建連接上傳圖片提交圖片,最后返回圖片絕對(duì)url和相對(duì)url給前端。
先實(shí)現(xiàn)前端：1.定義js 2.定義頁(yè)面
//導(dǎo)入 WebUploader插件js、css 樣式
<link rel="stylesheet" type="text/css" href="${ctx}/css/plugins/webuploader/webuploader.css" />
<script type="text/javascript" src="${ctx}/js/plugins/webuploader/webuploader.js"></script>
js定義
//使用WebUploader插件做圖片上傳
function InfoWebUploaderImg(id, folder, image, imageHidden, queueID, filename){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后，是否自動(dòng)上傳。
auto: true,
// swf文件路徑 下載js 里面有.swf文件
swf: '/js/plugins/webuploader/Uploader.swf',
// 文件接收服務(wù)端。后臺(tái)控制層
server: '/common/upload',
// 選擇文件的按鈕?？蛇x。
// 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
pick: id,
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png',
},
});
/**
* 驗(yàn)證文件格式、數(shù)量以及文件大小
*/
uploader.on("error", function(type) {
if (type == "Q_TYPE_DENIED") {
alert("請(qǐng)上傳圖片格式文件");
} else if (type == "F_EXCEED_SIZE") {
alert("文件大小不能超過(guò)8M");
}
});
// 文件上傳失敗，顯示上傳出錯(cuò)。
uploader.on( 'uploadError', function( file ) {
alert("上傳失敗,請(qǐng)重試!");
});
// 文件上傳成功，給item添加成功class, 用樣式標(biāo)記上傳成功。data回調(diào)的js
uploader.on('uploadSuccess', function(file,data) {
$(imageHidden).val('/' + data.nname);
$(image).attr("src", data.src);
$(image).css("margin-top", "10px");
$(image).show();
$(image).removeClass("hide");
});
}
//jsp頁(yè)面
<div class="center-block">
<div class="btn-group col-sm-12">
<div class="fl">
<div id="fileInput">選擇圖片</div>
<img src=""
class="wd200 mt10"
id="image" width="200"/>
</div>
<span class="help-block m-b-none">圖片大小：510x294</span>
<input class="form-control" id="imageHidden" name="cover" type="text"/>
</div>
</div>
//引用 js初始化插件
InfoWebUploaderImg("#fileInput", "spvideoimg", "#image", "input[name=cover]", "singleDiv");
java 后臺(tái)
//上傳圖片(阿里云) 控制層
@ResponseBody
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(@RequestParam(value = "f", required = false, defaultValue = "") String f,
String folder,
MultipartHttpServletRequest request, HttpServletResponse response) {
return commonService.upload(folder, f, request, response);
}
//業(yè)務(wù)處理
public String upload(String folder, String f, MultipartHttpServletRequest request, HttpServletResponse response) {
log.info("CommonService上傳圖片(騰訊云):newFilename11:" + f);
JSONObject jsonObject = new JSONObject();
String result = "";
try {
Iterator<String> itr = request.getFileNames();
MultipartFile file = null;
String name = "";
while (itr.hasNext()) {
file = request.getFile(itr.next());
name = file.getOriginalFilename();
String newFilenameBase = UUID.randomUUID().toString().replace("-", "");
String originalFileExtension = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String newFilename = newFilenameBase + originalFileExtension;
if (!StringUtils.isBlank(f)) {
if (f.startsWith(","))
f.substring(1);
newFilename = (f.contains(".") ? f.substring(0, f.lastIndexOf(".")) : f) + ".jpg";
}
newFilename = "img/" + newFilename;
AliyunOssUtils.upLoadFile(newFilename,PropertyUtil.getValue("folder"),file);
//TentunOssUtils.uploadImage(file, newFilename);
/*if (PropertyUtil.getValue("pic_url").endsWith("/")) {
jsonObject.put("src", PropertyUtil.getValue("pic_url") + newFilename);
} else {
jsonObject.put("src", PropertyUtil.getValue("pic_url") + "/" + newFilename);
}*/
jsonObject.put("src",CommonUtils.setImageVideoUrlSign(newFilename));
jsonObject.put("oname", name);
jsonObject.put("nname", newFilename);
//刪除暫存在root里的圖片
File tempFile = new File(name);
if (tempFile != null && tempFile.exists()) {
tempFile.delete();
}
}
} catch (Exception e) {
log.error("上傳圖片異常", e);
jsonObject.put("e", e.getMessage());
}
result = jsonObject.toString();
return result;
}
工具類(lèi)：
/**
* 文件上傳
* @param filename
* @param file
*/
public static void upLoadFile(String filename,String folder, MultipartFile file) {
try {
// Endpoint以杭州為例，其它Region請(qǐng)按實(shí)際情況填寫(xiě)。
String endpoint = UPLOAD_HOST;
// 阿里云主賬號(hào)AccessKey擁有所有API的訪(fǎng)問(wèn)權(quán)限，風(fēng)險(xiǎn)很高。強(qiáng)烈建議您創(chuàng)建并使用RAM賬號(hào)進(jìn)行API訪(fǎng)問(wèn)或日常運(yùn)維
String accessKeyId = ACCESS_KEY_ID;
String accessKeySecret = ACCESS_KEY_SECRET;
// 創(chuàng)建OSSClient實(shí)例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 創(chuàng)建PutObjectRequest對(duì)象。
PutObjectRequest putObjectRequest = new PutObjectRequest(folder, filename, multipartFileToFile(file));
// 如果需要上傳時(shí)設(shè)置存儲(chǔ)類(lèi)型與訪(fǎng)問(wèn)權(quán)限，請(qǐng)參考以下示例代碼。
// ObjectMetadata metadata = new ObjectMetadata();
// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
// metadata.setObjectAcl(CannedAccessControlList.Private);
// putObjectRequest.setMetadata(metadata);
// 上傳文件。
ossClient.putObject(putObjectRequest);
// 關(guān)閉OSSClient。
ossClient.shutdown();
} catch (Exception e) {
e.printStackTrace();
}
}
public static String setImageVideoUrlSign(String cover) {
if (cover.startsWith("/")) cover = cover.substring(1);
String host = PropertyUtil.getValue("pic_url");
if (!host.endsWith("/")) host = host + "/";
if (cover.startsWith("http") && cover.contains(host)) {
cover = host + cover + "?" + TentunOssUtils.getSigne(cover.replace(host, ""));
} else if (!cover.startsWith("http")) {
cover = host + cover + "?" + TentunOssUtils.getSigne(cover);
}
return cover;
}
public static String getSigne(String key) {
if (!key.startsWith("/")) key = "/" + key;
String sign = "";
String secretId = SECRET_ID;
String secretKey = SECRET_KEY;
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
COSSigner signer = new COSSigner();
// 設(shè)置過(guò)期時(shí)間為1個(gè)小時(shí)
Date expiredTime = new Date(System.currentTimeMillis() + 3600L * 1000L);
// 要簽名的 key, 生成的簽名只能用于對(duì)應(yīng)此 key 的下載
// String key = "/exampleobject";
sign = signer.buildAuthorizationStr(HttpMethodName.GET, key, cred, expiredTime);
return sign;
}
xml包：
<!-- 阿里云oss --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.8.0</version> </dependency>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Java生成唯一id的幾種實(shí)現(xiàn)方式,主要介紹了5種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
SpringBoot校園綜合管理系統(tǒng)實(shí)現(xiàn)流程分步講解
這篇文章主要介紹了SpringBoot+Vue實(shí)現(xiàn)校園綜合管理系統(tǒng)流程分步講解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
詳解Spring Boot 使用slf4j+logback記錄日志配置
本篇文章主要介紹了Spring Boot 使用slf4j+logback記錄日志配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Java數(shù)據(jù)結(jié)構(gòu)之簡(jiǎn)單的連接點(diǎn)(link)實(shí)現(xiàn)方法示例
這篇文章主要介紹了Java數(shù)據(jù)結(jié)構(gòu)之簡(jiǎn)單的連接點(diǎn)(link)實(shí)現(xiàn)方法,涉及java指針指向節(jié)點(diǎn)的相關(guān)使用技巧,需要的朋友可以參考下2017-10-10
這篇文章主要演示Java中使用命令打jar包的實(shí)例過(guò)程，很實(shí)用，希望能給大家做一個(gè)參考。2016-06-06
Spring Boot利用Thymeleaf發(fā)送Email的方法教程
spring Boot默認(rèn)就是使用thymeleaf模板引擎的，下面這篇文章主要給大家介紹了關(guān)于在Spring Boot中利用Thymeleaf發(fā)送Email的方法教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-08-08
這篇文章主要為大家詳細(xì)介紹了java實(shí)現(xiàn)電腦端掃描二維碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
spring boot如何使用AOP統(tǒng)一處理web請(qǐng)求
這篇文章主要介紹了spring boot如何使用AOP統(tǒng)一處理web請(qǐng)求,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
Java中Easyexcel?實(shí)現(xiàn)批量插入圖片功能
這篇文章主要介紹了Easyexcel?實(shí)現(xiàn)批量插入圖片,本文通過(guò)實(shí)例代碼給大家介紹了easyexcel文檔處理工具、自定義圖片處理器的相關(guān)知識(shí)，需要的朋友可以參考下2022-04-04
SpringBoot單點(diǎn)登錄實(shí)現(xiàn)過(guò)程詳細(xì)分析
這篇文章主要介紹了SpringBoot單點(diǎn)登錄實(shí)現(xiàn)過(guò)程，單點(diǎn)登錄英文全稱(chēng)Single?Sign?On，簡(jiǎn)稱(chēng)就是SSO。它的解釋是：在多個(gè)應(yīng)用系統(tǒng)中，只需要登錄一次，就可以訪(fǎng)問(wèn)其他相互信任的應(yīng)用系統(tǒng)2022-12-12