项目中,在后台进行jpg、png、world、excel等等文件的上传,并转化为base64存到数据库中,在前台使用到这个base64进行相应文件的下载。
后台代码:
@RequestMapping(value="save")
@ResponseBody
public Map<String,Object> save(HttpServletRequest request,HttpServletResponse response,@RequestParam Map<String, Object> params, @RequestParam("files") MultipartFile files) throws Exception{
String message = "";
String Code = "";
Map<String,Object> map = new HashMap<String,Object>();
int rst = 0;
UserInfo userInfo = userSession.getUserInfo();
//上传图片
if(files.getSize()/1024/1024/1024/10>=2){
message = "保存样表失败:附件大小不能大于200K!";
}
//通过base64转化图片
BASE64Encoder encoder = new BASE64Encoder();
String filesStr = encoder.encode(files.getBytes());
params.put("ybimg", filesStr);
//得到上传文件的文件名及后缀
String fileName = files.getOriginalFilename();
params.put("yb_wjm", fileName);
/*新增*/
int rst = 0 ;
rst = bdzsMinServiceImpl.tianJiaJueSeXinXi(params);
if (rst<=0) {
message = "保存失败";
code = "200";
}else {
message = "保存["+MapGetter.getString(params, "gnmc")+"]成功";
code = "100";
}
map.put("code", code);
map.put("message", message);
return map;
}
前台js代码:
//html页面
<img id="yangbiao" src="" />
<input type="button" class="zhs-btn" onclick="xiazai();" value="下载">
//js部分
//加载页面,
var ybimg;//文件的base64串
var ybimg_wjm;//文件的文件名
function onload () {
var param = {
mac:'12345678'
};
$.ajax({
url:'${basePath}bdzslquery.do',
type:'post',
dataType:'json',
data:param,
async:false,
success:function (data) {
$("#loading-box").toggle();//加载条
console.log(data);
// 判断返回数据当前状态
if(data.code == "00"){
//为页面赋值,这是图片的显示方法
$("#yangbiao").attr("src","data:image/jpeg;base64,"+data.data.ybimg);
ybimg = data.data.ybimg;
ybimg_wjm = data.data.ybimg_wjm;
console.log(ybimg)
}else{
alert(data.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {//弹出报错内容
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
};
//下载的功能按钮的方法
//下载需要用到文件的base64和含有后缀的文件名, 能够进行下载。
function xiazai(){
if (ybmb == "" || ybmb == null || ybmb == "null" || ybmb == "undefined" || ybmb == undefined) {
alert("没有文件可供下载!");
} else {
if (window.navigator.msSaveOrOpenBlob) {//这是 IE 特有的方法,判断是否是ie浏览器
//如果ie浏览器调用window.btoa()这个方法报错的话,可以采取把base64传到后台进行下载
$.ajax({
type:"post",
url:"${basePath}base64xiazai.do",
data:{base64:ybimg,wjm:ybimg_wjm},
dataType:"json",
success:function(result){
if (result == "1") {
alert("文件已经下载,请到【D/"+ybmb_wjm+"】");
}
}
});
} else {
//其他浏览器下载
downloadFile(ybmb_wjm,ybmb);
}
}
}
//下载
function downloadFile(fileName,content) {
const blob = this.base64ToBlob(content); // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) {//这是 IE 特有的方法,判断是否是ie浏览器
navigator.msSaveBlob(blob, fileName);
// navigator.msSaveOrOpenBlob(blob, fileName);
} else {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
}
//将base64转化成blob字段
function base64ToBlob(code) {
//const parts = code.split('base64,');
//const contentType = parts[0].split(':')[1];
const raw = window.atob(code);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array]);
}