上传前端代码及说明

前端用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();
                }
            }
        }
    }