小文件可以使用base64上传,大文件不建议使用base64,速度慢。
1 前端实现图片预览和axios上传
<div id="app"> <input type="file" ref="picFile"/> <img :src="imgData" style="max-width: 100px"/> <button @click="upload">上传</button> </div>
<script> var app = new Vue({ el:"#app", data:{ imgData:'' }, methods:{ upload:function(){ var file = this.$refs.picFile.files[0]; var fileReader = new FileReader(); //文件打开后的回调函数 fileReader.onload= e=>{ var base64 = e.target.result; //图片预览 this.imgData=base64; console.log(base64); //上传图片 axios.post(basePath+"/wanmaitupload",base64).param .then(res=>{ console.log("上传成功"); }); }; //打开文件 fileReader.readAsDataURL(file); } } }); </script>
2 后端解析base64数据并保持文件
一定注意后端需要URL解码,并且把加号+自动变为空格了,需要再替换回去
@PostMapping("/wanmaitupload") public Result uploadBase64(@RequestBody String base64) throws IOException { base64 = URLDecoder.decode(base64, "UTF-8"); System.out.println(base64); //Illegal base64 character 20 base64 编码中使用了加号(+),而 + 在 URL 传递时会被当成空格,因此造成了base64字符串被更改,在服务器端解码后就会出错 base64=base64.replaceAll(" ","+"); System.out.println(base64); if(!base64.startsWith("data:image/")) { return Result.error("只能上传图片"); } String regex = "data:image/(\\w+);base64,(.*)"; Pattern pattern = Pattern.compile(regex); Matcher matcher = pattern.matcher(base64); String ext=null; if(matcher.find()){ ext = matcher.group(1); base64=matcher.group(2); } else { return Result.error("只能上传图片"); } //java.util.Base64 byte[] byteData = Base64.getDecoder().decode(base64); //org.springframework.util.Base64Utils; //byte[] byteData = Base64Utils.decodeFromString(base64); //图片保存路径 String path = ResourceUtils.getURL("classpath:").getPath(); path += "/static/uploadImages"; String filename = UUID.randomUUID().toString().replaceAll("-", "") + "." + ext; File file = new File(path,filename); //org.apache.commons.io.FileUtils FileUtils.writeByteArrayToFile(file,byteData); return Result.success("上传成功"+filename); }
0条评论
点击登录参与评论