Spring Boot +Bootstrap 图片上传与下载,以及在bootstrap-table中的显示

时间:2023-03-09 13:07:07
Spring Boot +Bootstrap 图片上传与下载,以及在bootstrap-table中的显示

1.前台上传:

 <input type="file" name="file"  id="file">

2.后台的接收与处理:

        String uuid = UUID.randomUUID().toString();
//取得文件
MultipartFile file = form.getFile();
//获取存放文件的路径
File fileDir = UploadUtils.getImgDirFile();
try {
//构建新文件,包含路径+文件名
File newFile = new File(fileDir.getAbsolutePath(), uuid);
//保存文件
file.transferTo(newFile);
} catch (IOException e) {
e.printStackTrace();
}

这里放一下我上面构建存放文件路径的工具类 UploadUtils :

public class UploadUtils {

   /* // 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下(SpringBoot 默认)
public final static String IMG_PATH_PREFIX = "static/upload/imgs";*/ public static File getImgDirFile(){ // 构建上传文件的存放 "文件夹" 路径
String fileDirPath = new String("C:\\webImg");
File fileDir = new File(fileDirPath);
if(!fileDir.exists()){
// 递归生成文件夹
fileDir.mkdirs();
}
return fileDir;
}
}

保存图片后的文件夹:

Spring Boot +Bootstrap 图片上传与下载,以及在bootstrap-table中的显示

3.做完保存,接下来就得让它在前台显示出来,这里使用的容器是bootstrap-table,代码如下:

<table id="gamesTable" data-bind="bootstrapTable:$root" style="table-layout: fixed;">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="img" data-formatter="showImg">概念图</th>
<th data-field="name">名称</th>
<th data-field="dev">开发商</th>
<th data-field="shelfTime">发行日期</th>
<th data-field="price">价格</th>
</tr>
</thead>
</table>

JS处理data-formatter:

 function showImg(value){
var html="<img src='games/dw?uuid="+value+"' width='100%' />";
return html;
}

后台的下载方法:

    public void dw(String uuid,HttpServletRequest request, HttpServletResponse response) {
Games fileentity = dao.findByImg(uuid);
if(fileentity==null) { }else {
//文件名称
String filename = "sss.jpg";
filename = getStr(request, filename);
//下载文件的路径(即保存文件的路径
String filePath="C:\\webImg";
File file = new File(filePath, uuid);
if(file.exists()) {
FileInputStream fis;
try {
fis = new FileInputStream(file);
response.setContentType("application/x-msdownload");
response.addHeader("Content-Disposition", "attachment; filename=" + filename );
ServletOutputStream out = response.getOutputStream();
byte[] buf=new byte[2048];
int n=0;
while((n=fis.read(buf))!=-1){
out.write(buf, 0, n);
}
fis.close();
out.flush();
out.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
} }

附上处理文件名乱码的方法:

    //处理文件名乱码的问题
private String getStr(HttpServletRequest request, String fileName) {
String downloadFileName = null;
//仅提供了部分代码,因为我们已经明确问题的所在,知道修改那一部分了,(代码中downloadFileName 即代表 *=utf-8'zh_cn'文件名.xx部分)
String agent = request.getHeader("USER-AGENT");
try {
if(agent != null && agent.toLowerCase().indexOf("firefox") > 0){
//downloadFileName = "=?UTF-8?B?" + (new String(Base64Utils.encode(fileName.getBytes("UTF-8")))) + "?=";
//设置字符集
downloadFileName = "=?UTF-8?B?" + Base64Utils.encodeToString(fileName.getBytes("UTF-8")) + "?=";
}else{
downloadFileName = java.net.URLEncoder.encode(fileName, "UTF-8");
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
return downloadFileName;
}

以上。

Spring Boot +Bootstrap 图片上传与下载,以及在bootstrap-table中的显示