前端上传图片后端存到Oracle的CLOB字段中
前端测试代码
<div>
<p>(点击头像开始选择新头像)</p><br>
<p >
<img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" >
</p>
<br>
<form id="test">
<input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/>
</form>
<button data-role="none" onclick="testUpload();" class="btn btn-info">保存头像</button>
</div>
js代码提交事件
//点击div之后把上传的图片地址传递给src显示到界面上
function imgChange(e) {
console.info(e.target.files[0]);//图片文件
//这个也是文件的路径和上面的dom.value是一样的
console.log(e.target.value);
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
$('.user-header').attr('src',this.result);
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
//img标签触发选择文件上传
$('.user-header').click(function () {
$("#file").click();
});
//保存头像发送ajax请求
function testUpload(){
var form = new FormData();
form.append('id','123456');
form.append('file',$("#file")[0].files[0]);//要上传文件
form.append('FILE_TYPE',$("#file")[0].files[0].name.substring($("#file")[0].files[0].name.lastIndexOf(".")+1));
form.append('CREATE_USER',"zjg");
form.append('FILE_DETAIL',"文件详细信息");
form.append('CREATE_ACCOUNT',"12345");
$.ajax({
url:"${root!}/web/website/img",
data:form,
type:"POST",
processData:false,
contentType:false,
success : function(result){
console.log(result);
},
});
}
后端代码
@ResponseBody
@RequestMapping("/img")
public Result img(@RequestParam(value = "file",required = false) MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
//新建好要放信息的实体类
UserBean bean = new UserBean();
try {//USER_ID作为查询的关键字段
String USER_ID = request.getParameter("USER_ID");
InputStream inputStream= null;
if (StringUtil.isNotEmpty(USER_ID)) {
String result ==webSiteService.getUserIsSupplier(USER_ID);
if (result.equals("0")) {
bean.setID(USER_ID);
inputStream= file.getInputStream();
byte[] byteFile = null;
//把输入流复制到字节数组
byteFile=FileCopyUtils.copyToByteArray(inputStream);
//放进实体类之前要把字节转换成字符串,方法在下面
bean.setYYZZ_FILE(byte2hex(byteFile));
//存到数据库
webSiteService.updateUser(bean);
return Result.success("success", bean);
} else {
return Result.error("error", "用户已经是供应商,无需重复注册!");
}
} else {
return Result.error("error", "检查输入信息的完整性!");
}
}catch (Exception e){
e.printStackTrace();
return Result.error("error",e.getMessage());
}
提供下载图片功能
@RequestMapping("/download/img")
public void downloadimg(HttpServletRequest request,HttpServletResponse response){
response.setHeader("Access-Control-Allow-Origin", "*");
String id=request.getParameter("id");
//根据前段传过来的id找到CLOB字段数据
UserBean bean=webSiteService.getGongYingShangDetail(id);
OutputStream os = null;//输出流
//字节数组输入流,用于读取CLOB字段
ByteArrayInputStream bin=null;
try {
response.setContentType("multipart/form-data");
//处理下载弹出框名字的编码问题
//设置响应头和文件名字以及编码方式
response.setHeader("Content-Disposition", "attachment;fileName=\"" + new String(bean.getNAME_OF_BIDDER().getBytes ("gb2312"), "ISO8859-1" )+ "\"");
os = response.getOutputStream();
//将CLOB中的字符串转换成字节数据到流中
bin = new ByteArrayInputStream(hex2byte(bean.getYYZZ_FILE()));
int len=0;//标志位
byte[] buffer=new byte[1024];//块读可以提高效率
while((len=bin.read(buffer))>0){//从输入流中读取到字节数组中
os.write(buffer,0,len);//输出流写出来
}
os.flush();//把缓冲区的数据一次性刷出去
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
转换方法
/**
* 二进制转字符串
* @param b byte数组
* @return 二进制字符串
*/
public static String byte2hex(byte[] b){
StringBuffer sb = new StringBuffer();
String stmp = "";
for (int n = 0; n < b.length; n++) {
stmp = Integer.toHexString(b[n] & 0XFF);
if (stmp.length() == 1) {
sb.append("0" + stmp);
} else {
sb.append(stmp);
}
}
return sb.toString();
}
/**
* 字符串转二进制
* @param str 字符串
* @return byte数组
*/
public static byte[] hex2byte(String str) {
if (str == null)
return null;
str = str.trim();
int len = str.length();
if (len == 0 || len % 2 == 1)
return null;
byte[] b = new byte[len / 2];
try {
for (int i = 0; i < str.length(); i += 2) {
b[i / 2] = (byte) Integer.decode("0X" + str.substring(i, i + 2)).intValue();
}
return b;
} catch (Exception e) {
return null;
}
}
如果文件上传img的request通过request.getParameter(“FILE_TYPE”);拿不到参数可以尝试添加以下代码:
if (contentType != null && contentType.contains("multipart/form-data")) {
MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
// 将转化后的 request 放入过滤链中
request = multipartRequest;
}
该篇文章部分转载于:附上大哥链接
转化方法现在还没看明白emmm;为提高点击率附上老婆图片一张。
祝点赞的小哥哥越来越帅,评论的小姐姐越来越漂亮。