上传前端代码及说明
前端用vue.js框架,不会vue.js也能看懂,更vue.js没太大关系
HTML代码
<input type="file" id="fileid" v-model="filename" />
//此处可以<input type="file" id="fileid" />
js代码
var objFile = document.getElementById("fileid");
var form = new FormData();
form.append("file", objFile.files[0]);
form.append("node", this.type);
form.append("filename", this.newfilename);
$.ajax({
url: "http://localhost:8081/px/trainrecord/uploadrar",//请求的地址
type: "post",
processData: false, //告诉jquery要传输data对象
contentType: false, // 告诉jquery不需要增加请求头对于contentType的设置
async: false,
cache: false,
data: form,
success: function(obj) {
//上传成功需要处理的代码
},
error: function() {
//上传失败处理的代码
}
});
上传后端代码及说明
后端使用的spring boot框架
代码
//Controller层
@ResponseBody
@RequestMapping("/trainrecord/uploadrar")
public String uploadrar(Long node, MultipartFile file,String filename){//参数名要和FormData对象中的字段名相同
String info = "";
try {
trainrecordService.uploadrar(node,file,filename);
info = "ok";
} catch (Exception e) {
info = "error";
e.printStackTrace();
}
return info ;
}
//Service层
@Transactional(propagation = Propagation.REQUIRED,isolation = Isolation.READ_COMMITTED,rollbackFor = {Error.class,Exception.class})//事务
public void uploadrar(Long node , MultipartFile file,String filename){//filename为用户自己定义的用户名
String fileName = file.getOriginalFilename();//得到文件名带后缀的
Long filesize = file.getSize();
if(filename == null || filename =="" || filename.length() == 0){
filename = fileName.substring(0,fileName.lastIndexOf("."));
}//默认为所选文件名
try {
//InputStream fileinput = file.getInputStream();
Long id = Long.valueOf(commonService.getNewID("PX_MAL_ATTACH"));
//对象赋值
pxMalAttach.setAttachid(id);
pxMalAttach.setRecordid(node);
pxMalAttach.setFilenumber(filesize);
pxMalAttach.setReAttachname(fileName);
pxMalAttach.setAttachname(filename+fileName.substring(fileName.lastIndexOf(".")));
pxMalAttach.setRoute(file.getBytes());//Oracle数据库blob字段存的是byte数组
pxMalAttachMapper.insert(pxMalAttach);//保存到数据库
}catch (Exception e){
e.printStackTrace();
}
}
下载前端代码
自己写对应下载的按钮,点击进入下面的函数
注意:下载只能通过form提交请求,不能用Ajax请求
//在js中模拟form提交
download: function(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "POST";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("input");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
},
下载后端代码
注意:下载网上很多都有response.setContentType(“application/x-msdownload”);
这个可以不要,是指定下载成什么文档。
response.setHeader(“Content-Disposition”, “attachment; filename=”+new String(pxMalAttach1.getAttachname().getBytes(“GB2312”),“ISO-8859-1”));
filename要带后缀名,系统就知道下载成什么文档。
//Controller层
@RequestMapping("/trainrecord/download")
public void download(HttpServletResponse response,Long node){
try {
trainrecordService.download(response,node);
} catch (Exception e) {
e.printStackTrace();
}
}
//Service层
@Transactional(propagation = Propagation.REQUIRED,isolation = Isolation.READ_COMMITTED,rollbackFor = {Error.class,Exception.class})
public void download( HttpServletResponse response,Long node){
// Long node = Long.valueOf(data.get("node"));
OutputStream os = null;
try {
PxMalAttach pxMalAttach1= pxMalAttachMapper.selectByPrimaryKey(node);
os = response.getOutputStream();
//response.setContentType("application/x-msdownload");
response.setHeader("Content-Disposition", "attachment; filename="+new String(pxMalAttach1.getAttachname().getBytes("GB2312"),"ISO-8859-1"));//这里的filename需要带后缀的文件名,必须和上传的文件后缀一致
response.setHeader("Connection", "close");
response.setHeader("Content-Type", "application/octet-stream");
byte[] buffer = pxMalAttach1.getRoute();//获得Oracle数据库blob字段值
os.write(buffer);//下载
os.flush();
os.close();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException ex) {
ex.printStackTrace();
}finally{
if(os != null ){
try {
os.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}