java 上传图片，图片预览，2种方法
1. 方法一：定制化开发将图片上传到特定磁盘
html页面，form表单内容：
<div class="layui-form-item"> <label class="layui-form-label">头像</label> <div class="layui-input-inline"> <input th:if="${bean!=null}" type="text" id="imagePath" name="photo" th:value="${bean.photo}" lay-verify="required" placeholder="定制化开发请上传图片" autocomplete="off" class="layui-input dragImg" > </div> <button style="float: left;" type="button" class="layui-btn dragImg" id="layuiadmin-upload-useradmin">上传图片</button></div><div th:if="${bean==null}" class="layui-form-item" style="display: none" id="demo2"> <div class="layui-inline"> <label class="layui-form-label">预览效果：</label> <img class="layui-upload-img" id="image" style="width: 9em;height: 9em"> </div></div><div class="layui-form-item layui-hide"> <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认"></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
layui -js代码：
layui.use(['index', 'form', 'user'], function(){ var $ = layui.$ ,form = layui.form ,upload = layui.upload ; // 上传头像 upload.render({ elem: '.dragImg' // 拖拽上传 ,url: "/user/uploadPhoto" ,accept: 'images' ,method: 'post' ,acceptMime: 'image/*' // 图片类型 // ,ext: 'jpg|png|gif|bmp|jpeg' , before: function (obj) { //定制化开发预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#image').attr('src', result); //图片链接（base64） $('#demo2').show(); }); } ,done: function(res){ if(res.code==200){ let src = res.src; //定制化开发把图片路径返回过来 $("#image").attr("src",src); //定制化开发图片在预览上显示 $("#imagePath").attr("value",src); //定制化开发给图片路径隐藏域赋值 } // $(this.item).prev("div").children("input").val(res.src) } });})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
表单提交：
,yes: function(index, layero){ var iframeWindow = window['layui-layer-iframe'+ index] ,submitID = 'LAY-user-back-submit' ,submit = layero.find('iframe').contents().find('#'+ submitID); //监听提交 iframeWindow.layui.form.on('submit('+ submitID +')', function(data){ var field = data.field; //定制化开发获取提交的字段 console.log(field.isUse) //data.field定制化开发里面的值为form要提交的数据 $.post("/user/admin/adminAdd",field,function(result){ if(result.code == 200){ layer.alert(result.msg,{icon:1,time: 1000}); //提交 Ajax 成功后，静态更新表格中的数据 table.reload('LAY-user-back-manage'); //数据刷新 layer.close(index); //关闭弹层 }else{ layer.alert(result.msg,{icon:2,time: 1000}); } },"json"); }); submit.trigger('click');}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
control业务层：
/** * 上传头像 */@Value("${file.uploadPath}")private String basepath;@RequestMapping(value = "/uploadPhoto", method = {RequestMethod.POST, RequestMethod.GET}, produces = "application/json;charset=utf-8")@ResponseBodypublic Map<String, Object> uploadPhoto(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception { Map<String, Object> map = new HashMap<String, Object>(); String uploadPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/images/"; // UploadUtil是一个工具类，返回的是图片的存储路径 String imagePath = UploadUtil.upload(file, basepath, uploadPath); System.out.println(imagePath); if (imagePath != null) { map.put("code", 200); map.put("msg", "上传成功"); map.put("src", imagePath); } else { map.put("code", 400); map.put("msg", "上传失败"); } return map;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
添加UploadUtil工具类：
public class UploadUtil { /** * * @param file * @param basepath 定义一个上传文件的路径 * @param savepath 定义文件服务器的访问地址 images 目录要一致 * @return */ public static String upload(MultipartFile file,String basepath,String savepath){ //获得上传文件的名称 String filename = file.getOriginalFilename(); //创建UUID，用来保持文件名字的唯一性 String uuid = UUID.randomUUID().toString().replace("-",""); //进行文件名称的拼接 String newFileName = uuid+filename; //创建文件实例对象 File uploadFile = new File(basepath,newFileName); // 判断路径是否存在,没有创建 if (!uploadFile.getParentFile().exists()) { uploadFile.getParentFile().mkdirs(); } //执行文件上传的命令 try { //图片存进目录下去 file.transferTo(uploadFile); } catch (IOException e) { return null; } //将上传的文件名称返回，注意，这里我们返回一个 服务器地址 return savepath+newFileName; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
control业务层中的变量
#上传图片路径file: uploadPath: F:\\study\\javaNews\\src\\main\\resources\\static\\images\\- 1
- 2
- 3
配置类 WebMvcConfg 定义静态资源映射目录
@Configurationpublic class WebMvcConfg implements WebMvcConfigurer { /** * addPathPatterns 要拦截的路径 * excludePathPatterns 不拦截的路径 */ @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new AdminLoginInterceptor()).addPathPatterns("/user/**") .excludePathPatterns("/user/login") .excludePathPatterns("/user/logout") .excludePathPatterns("/user/password") .excludePathPatterns("/user/config/info"); } /** * 静态资源（自定义静态资源映射目录） * @param registry */ @Value("${file.uploadPath}") private String basepath; public void addResourceHandlers(ResourceHandlerRegistry registry) { // 前端浏览器访问路径带有/file/**就转到对应磁盘下读取图片【3种方法】 // registry.addResourceHandler("/images/**").addResourceLocations("file:F:/study/javaNews/src/main/resources/static/images/"); // registry.addResourceHandler("/images/**").addResourceLocations("file:"+basepath); registry.addResourceHandler("/images/**").addResourceLocations("file:"+System.getProperty("user.dir")+"/src/main/resources/static/images/"); //将所有/static/** 访问都映射到classpath:/static/ 目录下 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
2. 方法二：将图片上传到七牛云网站
html页面，form表单内容：
<div class="layui-form-item"> <label class="layui-form-label">照片：</label> <div class="layui-input-block"> <input type="text" name="img" placeholder="请上传照片" lay-verify="required" readonly id="img" autocomplete="off" class="layui-input" th:value="${bean.img}"> </div></div><div class="layui-form-item" id="demo2"> <div class="layui-inline"> <label class="layui-form-label">预览效果：</label> <img class="layui-upload-img" id="demo1" th:src="${bean.img}" style="width: 9em;height: 9em"> </div></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
layui -js代码：
//拖拽上传，普通图片上传var uploadInst = upload.render({ elem: '#img' , url: '/uploadMulit?type=goods' , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //图片链接（base64） $('#demo2').show(); }); } , done: function (res) { //如果上传失败 if (res.code != 200) { return layer.msg('上传失败'); } else { $('#img').val(res.data); return layer.msg('上传成功'); } } , error: function () { }});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
表单提交：
//监听表单提交提交form.on('submit(submit)', function (data) { $.post("/admin/student/edit", data.field, function (res) { if (res.code == 200) { layer.msg(res.msg, {offset: 't',icon: 1, time: 1500}, function () { location.href = res.data; }) } else { layer.msg(res.msg, {offset: 't',icon: 2, time: 1500}); } }); return false;});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
control业务层：
@ResponseBody@RequestMapping(value = "/uploadMulit", method = RequestMethod.POST)public ResultMsg uploadImg(MultipartFile file) throws IOException { if (file.isEmpty()) { return ResultMsg.build(400, "文件为空，请重新上传"); } byte[] bytes = file.getBytes(); String imageName = UUID.randomUUID().toString(); try { //使用base64方式上传到七牛云 String url = QiniuCloudUtil.put64image(bytes, imageName); System.out.println(url); return ResultMsg.build(200, "文件上传成功", url); } catch (Exception e) { e.printStackTrace(); return ResultMsg.build(500, "文件上传发生异常！"); }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
添加 QiniuCloudUtil 工具类：
public class QiniuCloudUtil { // 设置需要操作的账号的AK和SK private static final String ACCESS_KEY = "填你自己的"; private static final String SECRET_KEY = "填你自己的"; // 设置需要上传图片网址 private static final String DOMAIN = "http://upload.test.vip"; // 要上传的空间 private static final String bucketname = "test01"; // 密钥 private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); private static final String style = "你的样式"; public static String getUpToken() { return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1)); } //base64方式上传 public static String put64image(byte[] base64, String key) throws Exception{ String file64 = Base64.encodeToString(base64, 0); Integer len = base64.length; //华北空间使用 upload-z1.qiniu.com，华南空间使用 upload-z2.qiniu.com，北美空间使用 upload-na0.qiniu.com String url = "http://upload-z2.qiniu.com/putb64/" + len + "/key/"+ UrlSafeBase64.encodeToString(key) RequestBody rb = RequestBody.create(null, file64); Request request = new Request.Builder() .url(url) .addHeader("Content-Type", "application/octet-stream") .addHeader("Authorization", "UpToken " + getUpToken()) .post(rb).build(); //System.out.println(request.headers()); OkHttpClient client = new OkHttpClient(); okhttp3.Response response = client.newCall(request).execute(); //如果不需要添加图片样式，使用以下方式 return DOMAIN+"/"+key; //return DOMAIN + key + "?" + style; } // 普通删除(暂未使用以下方法，未体测) public static void delete(String key) throws IOException { // 实例化一个BucketManager对象 BucketManager bucketManager = new BucketManager(auth); // 此处的33是去掉：http://ongsua0j7.bkt.clouddn.com/,剩下的key就是图片在七牛云的名称 key = key.substring(33); try { // 调用delete方法移动文件 bucketManager.delete(bucketname, key); } catch (QiniuException e) { // 捕获异常信息 Response r = e.response; System.out.println(r.toString()); } } class Ret { public long fsize; public String key; public String hash; public int width; public int height; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
control业务层中的变量
# 七牛云上传qiniu: AccessKey: 填你自己的 SecretKey: 填你自己的 Bucket: lxsx cdn: prefix: http://q06ek3ls8.bkt.clouddn.com# 上传文件的路径basePath: E:\Video\course- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
本文为原创作品，转载请注明出处