WebUploader實現圖片上傳功能
阿新 • • 發佈：2021-03-16
本文例項為大家分享了WebUploader實現圖片上傳的具體程式碼，供大家參考，具體內容如下
描述：springmvc 在jsp頁面實現 WebUploader外掛上傳圖片,上傳到 oss阿里雲端儲存上。
預覽：
理解： 前端 WebUploader外掛（這個得去看官網）調起後臺,後臺 request 接收檔案引數，
重新拼裝圖片url，oss建立連線上傳圖片提交圖片,最後返回圖片絕對url和相對url給前端。
先實現前端：1.定義js 2.定義頁面
//匯入 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>
jwww.cppcns.coms定義
//使用WebUploader外掛做圖片上傳
function InfoWebUploaderImg(id,folder,image,imageHidden,queueID,filename){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完檔案後，是否自動上傳。
auto: true,// swf檔案路徑 下載js 裡面有.swf檔案
swf: '/js/plugins/webuploader/Uploader.swf',// 檔案接收服務端。後臺控制層
server: '/common/upload',// 選擇檔案的按鈕。可選。
// 內部根據當前執行是建立，可能是input元素，也可能是flash.
pick: id,// 只允許選擇圖片檔案。
accept: {
title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png',},});
/**
* 驗證檔案格式、數量以及檔案大小
*/
uploader.on("error",function(type) {
if (type == "Q_TYPE_DENIED") {
alert("請上傳圖片格http://www.cppcns.com
//jsp頁面
<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 後臺
//上傳圖片(阿里雲) 控制層 @ResponseBody @RequestMapping(value = "/upload",method = RequestMethod.POST) public String upload(@RequestParam(value = "f",required = false,defaultValue = "") String f,StKPVSXPeXring folder,MultipartHttpServletRequest request,HttpServletResponse response) { return commonService.upload(folder,f,request,response); } //業務處理 public String upload(String folder,String f,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")http://www.cppcns.com + 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; }
工具類：
/**
* 檔案上傳
* @param filename
* @param file
*/
public static void upLoadFile(String filename,String folder,MultipartFile file) {
try {
// Endpoint以杭州為例，其它Region請按實際情況填寫。
String endpoint = UPLOAD_HOST;
// 阿里雲主賬號AccessKey擁有所有API的訪問許可權，風險很高。強烈建議您建立並使用RAM賬號進行API訪問或日常運維
String accessKeyId = ACCESS_KEY_ID;
String accessKeySecret = ACCESS_KEY_SECRET;
// 建立OSSClient例項。
OSS ossClient = new OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);
// 建立PutObjectRequest物件。
PutObjectRequest putObjectRequest = new PutObjectRequest(folder,filename,multipartFileToFile(file));
// 如果需要上傳時設定儲存型別與訪問許可權，請參考以下示例程式碼。
// ObjectMetadata metadata = new ObjectMetadata();
// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS,StorageClass.Standard.toString());
// metadata.setObjectAcl(CannedAccessControlList.Private);
// putObjectRequest.setMetadata(metadata);
// 上傳檔案。
ossClient.putObject(putObjectRequest);
// 關閉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.getSignhttp://www.cppcns.come(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();
// 設定過期時間為1個小時
Date expiredTime = new Date(System.currentTimeMillis() + 3600L * 1000L);
// 要簽名的 key,生成的簽名只能用於對應此 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。