需求:
最近在做項目的時候採用了多模塊的方案
前臺是一個系統 後臺是另一個系統
在做圖片上傳的時候有個問題 如果想之前那樣前臺系統的圖片保存的自己的web應用目錄下 後臺系統是沒法訪問的 (直接寫死路徑不太好)
這裏我想到了兩個方案
方案一:自己搭建一個ftp服務器上傳圖片 然後再搭建一個nginx服務器來訪問
方案二:採用七牛雲存儲平臺
這裏我採用的是方案二 因爲沒有體驗過七牛 借這個機會玩玩
- 第一步註冊七牛賬號 獲取相關的key
- 導入jar包 這裏採用maven方式
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<!--這樣寫 會自動找7.2的最高版本-->
<version>[7.2.0, 7.2.99]</version>
</dependency>
- 上傳圖片有兩種方式 一是客戶端上傳 而是服務器直傳
這裏我用的服務器直傳
瀏覽器採用的html5 壓縮 傳輸base64方式 所以這裏用Base64解碼並生成圖片
如果是傳統的MultipartFile則不需要
@RequestMapping("/upload")
@ResponseBody
public Map imageUpload(String type,String value,HttpServletRequest request) {
Logger logger = Logger.getLogger(this.getClass());
Map map = imageService.uploadImage(value, request.getSession().getServletContext());
return map;
}
@Service
public class ImageServiceImpl implements ImageService {
@Override
public Map uploadImage(String imgStr, ServletContext servletContext) {
Map map = new HashMap();
//對字節數組字符串進行Base64解碼並生成圖片
if (imgStr == null) { //圖像數據爲空
map.put("error", 1);
map.put("message", "上傳失敗");
return map;
}
BASE64Decoder decoder = new BASE64Decoder();
try {
//Base64解碼
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {//調整異常數據
b[i] += 256;
}
}
String key = IDUtils.genImageName();
//構造一個帶指定Zone對象的配置類
Configuration cfg = new Configuration(Zone.zone0());
//...其他參數參考類註釋
UploadManager uploadManager = new UploadManager(cfg);
//...生成上傳憑證,然後準備上傳
String accessKey = "ceLw-DN7neXckVebuUE6eOJC1GPBuXkXS4mkyOzb";
String secretKey = "pg3QL2EuJY9LOjSayhBWGHvAlwfdxEk9UXrx9zT9";
String bucket = "zspwork";
//默認不指定key的情況下,以文件內容的hash值作爲文件名
ByteArrayInputStream byteInputStream = new ByteArrayInputStream(b);
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
Response response = uploadManager.put(byteInputStream, key, upToken, null, null);
//解析上傳成功的結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);
map.put("error", 0);
map.put("message", "http://o7k6tx0fl.bkt.clouddn.com/" + key);
} catch (Exception e) {
e.printStackTrace();
map.put("error", 1);
map.put("message", "上傳失敗");
return map;
}
return map;
}
}
前臺 上傳圖片後回調拿到地址
<a href="javascript:;" class="file">選擇文件
<input type="file" id="photo" accept="image/*">
</a>
<input type="text" class="form-control" name="cardImgurl" id="imgInput" readonly>
// 圖片上傳
$('#photo').change(function () {
var _this = $(this)[0],
_file = _this.files[0],
fileType = _file.type;
console.log(_file.size);
if (/image\/\w+/.test(fileType)) {
//提示
var index = layer.open({
content: '圖片上傳中...'
, skin: 'msg'
});
var fileReader = new FileReader();
fileReader.readAsDataURL(_file);
fileReader.onload = function (event) {
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function () { //創建一個image對象,給canvas繪製使用
var cvs = document.createElement('canvas');
var scale = 1;
if (this.width > 1000 || this.height > 1000) { //1000只是示例,可以根據具體的要求去設定
if (this.width > this.height) {
scale = 1000 / this.width;
} else {
scale = 1000 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale; //計算等比縮小後圖片寬高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(fileType, 0.8); //重新生成圖片,<span style="font-family: Arial, Helvetica, sans-serif;">fileType爲用戶選擇的圖片類型</span>
var sendData = newImageData.replace("data:" + fileType + ";base64,", '');
$.post('/upload', {type: 'photo', value: sendData}, function (data) {
if (data.error == '0') {
$('.modify_img').attr('src', newImageData);
$("#imgInput").attr("value", data.message);
layer.closeAll();
} else {
layer.closeAll();
layer.open({
content: data.message
, skin: 'msg'
});
}
});
}
}
} else {
layer.open({
content: '請選擇圖片格式文件'
, skin: 'msg'
});
}
});