1200字范文 > java 上传图片图片预览 2种方法

java 上传图片图片预览 2种方法

时间：2021-04-25 01:05:47

相关推荐

java 上传图片图片预览 2种方法

java 上传图片，图片预览，2种方法

1. 方法一：将图片上传到特定磁盘

html页面，form表单内容：

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) {//预读本地文件示例，不支持ie8obj.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)}});})

表单提交：

,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');}

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;}

添加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;}}

control业务层中的变量

#上传图片路径file:uploadPath: F:\\study\\javaNews\\src\\main\\resources\\static\\images\\

配置类 WebMvcConfg 定义静态资源映射目录

@Configurationpublic class WebMvcConfg implements WebMvcConfigurer {/*** addPathPatterns 要拦截的路径* excludePathPatterns 不拦截的路径*/@Overridepublic 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/");}}

2. 方法二：将图片上传到七牛云网站

html页面，form表单内容：

layui -js代码：

//拖拽上传，普通图片上传var uploadInst = upload.render({elem: '#img', url: '/uploadMulit?type=goods', before: function (obj) {//预读本地文件示例，不支持ie8obj.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 () {}});

表单提交：

//监听表单提交提交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;});

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, "文件上传发生异常！");}}

添加 QiniuCloudUtil 工具类：

public class QiniuCloudUtil {// 设置需要操作的账号的AK和SKprivate 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-，华南空间使用 upload-，北美空间使用 upload-String url = "http://upload-/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./,剩下的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;}}

control业务层中的变量

# 七牛云上传qiniu:AccessKey: 填你自己的SecretKey: 填你自己的Bucket: lxsxcdn:prefix: http://q06ek3ls8.# 上传文件的路径basePath:E:\Video\course