【base64上传 和 MultipartFile上传】- SpringBoot

【base64上传 和 MultipartFile上传】

记录一下项目中遇到的上传问题，base64上传和MultipartFile上传具体实现！

一.base64上传

1.html页面（只截取了上传部分div）

<div class="form-group">
    <label class="col-sm-3 control-label"> <em style="color: red;font-style: normal;">*</em> 门店图片：</label>
    <div class="col-sm-8">
        <div class="mendian">+</div>
        <input type="file" id="fileUp"style="display:none;">
    </div>
</div>

<butten type="submit" id="submit"></butten>

2.js部分

var tx_base64 = "" ; //图片路径

$("submin").on("click",function(){
upload();
});

function upload(){
    /* 此处获取上传图片的base64码*/
    var a = $(".mendian").css("background");
    a = a.substring(a.indexOf("base64,") + 7, a.length - '") repeat scroll 50% 50% / cover padding-box border-box'.length);
   
    var storeData = new Object();
    storeData.imgMechanics = a;
        //还有其他实体此处忽略
         $.ajax({
            cache: true,
            type: "POST",
            url: "/save",
            data: JSON.stringify(storeData),//JSON序列化
            contentType: "application/json",//比较关键
            
            // 只做上传测试可以忽略返回操作部分
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }
            }
        });
}
//门店图片上传图片选择及回显
$(".mendian").click(function () {
    $("#fileUp").click()
});
$('#fileUp').on('change',function(e){
    var b=$("#fileUp").val();
    $("#fbgimg").val(new Date().getTime()+ "_" +b.substr(b.lastIndexOf("\\")+1));
    var file = e.target.files || e.dataTransfer.files;
    if (file) {
        var reader = new FileReader();
        reader.onload = function () {
            $('.mendian').html("");
            $('.mendian').css({"background":" url(" + this.result + ") center center","background-size":"cover"});
            tx_base64 = this.result;
        }
        reader.readAsDataURL(file[0]);
    }
});

3.controller部分

    //R 为项目要求另写的返回要求，在本次base64上传中可以忽略，或根据自己替换
    @ResponseBody
	@PostMapping("/save")
	//由于ajax传值JSON序列化了，所以必须使用 @RequestBody 注解，否则接收不到
	public R save( @RequestBody StoreDataDO storeData ) {

		String path = storeData.getFbgimg();//图片路径实体，方便数据存储用，本例可以忽略
		String sqlpath = "../img/store/"+path; //数据库保存路径
     	String savePath ="E:\\"; //上传文件保存路径
		storeData.setFbgimg(sqlpath);
		
		//开始处理上传
		File dest;
		dest = new File(savePath+path);

		//判断父目录是否存在，不存在则创建
		if (!dest.getParentFile().exists()) {
				dest.getParentFile().mkdir();
		}
		//使用工具类 提供的方法 generateImage(String imgStr, String path)  上传图片并保存
		if(generateImage(storeData.getImgMechanics(),savePath+path) && storeDataService.save(storeData)>0 ) {
			return R.ok();
		}
		return R.error();
	}

4.base64上传工具类部分（通用）

public class Base64ToPhoto {
    public static boolean generateImage(String imgStr, String path) {
        if (imgStr == null) {
            return false;
           }
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            // 解密
            byte[] b = decoder.decodeBuffer(imgStr);
            // 处理数据
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                b[i] += 256;
                    }
                }
             OutputStream out = new FileOutputStream(path);
             out.write(b);
             out.flush();
             out.close();
             return true;
            } catch (Exception e) {
             return false;
        }
    }
}

二.MultipartFile上传

1.html页面（只截取了上传部分div）

<div class="form-group">
    <label class="col-sm-3 control-label"> <em style="color: red;font-style: normal;">*</em> 门店图片：</label>
    <div class="col-sm-8">
        <div class="mendian">+</div>
        <input type="file" id="fileUp"style="display:none;">
    </div>
</div>

<butten type="submit" id="submit"></butten>

2.js部分

$("submin").on("click",function(){
upload();
});

function upload(){
  var formData = new FormData();
  formData.append("file", $("#fileUp")[0].files[0]);
         $.ajax({
            cache: true,
            type: "POST",
            url: "/save",
            data: formData ,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            }
            });     
}
//门店图片上传图片选择及回显
$(".mendian").click(function () {
    $("#fileUp").click()
});
$('#fileUp').on('change',function(e){
    var b=$("#fileUp").val();
    $("#fbgimg").val(new Date().getTime()+ "_" +b.substr(b.lastIndexOf("\\")+1));
    var file = e.target.files || e.dataTransfer.files;
    if (file) {
        var reader = new FileReader();
        reader.onload = function () {
            $('.mendian').html("");
            $('.mendian').css({"background":" url(" + this.result + ") center center","background-size":"cover"});
            tx_base64 = this.result;
        }
        reader.readAsDataURL(file[0]);
    }
});

3.controller部分

//@RequestParam 中的 value 值需要和js [ formData.append("file", $("#fileUp")[0].files[0]) ]中append 第一个参数 "file" 一致
 @RequestMapping("/save")
    public Object fileUpload(@RequestParam(value = "file", required = false) MultipartFile file){
        if (file.isEmpty()) {
            return "上传文件不可为空";
        }
        String newfileName = file.getOriginalFilename();
        newfileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" + newfileName;//（加个时间戳，尽量避免文件名称重复）
        String path = "E:\\" + newfileName;
        File dest = new File(path);
        //判断文件是否已经存在
        if (dest.exists()) {
            return "文件已经存在";
        }
        //判断文件父目录是否存在
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdir();
        }
        try {
            file.transferTo(dest); //保存文件
        } catch (IOException e) {
            return "上传失败";
        }
        return dest ;
    }

总结

本次都只写了 base64 和 MultipartFile 的单文件上传，项目中遇到，便记录了下来，常用的还是 多文件上传+数据一起提交