web uploader 框架上传图片，java后台处理

最新推荐文章于 2021-02-22 08:40:21 发布

amelia_

最新推荐文章于 2021-02-22 08:40:21 发布

阅读量6.4k

点赞数

分类专栏： Java 文章标签： webuploader上传图片 java后台开发图片回显 java 框架

本文链接：https://blog.csdn.net/xxyybs/article/details/69384716

版权

本文介绍了使用web uploader框架在微信端开发中进行图片上传的实践经验，包括前端代码配置，设置sendAsBinary: true确保正确content-type，以及Java后台接收处理。同时，详细阐述了如何在前端进行图片回显，特别是多张图片上传后的展示逻辑，通过获取上传div的id来定位并更新图片路径。

摘要由CSDN通过智能技术生成

前言：最近刚刚接触到微信端的开发，使用到了web uploader 框架作为上传组件，初步接触，走进了很多坑，在不断的试验，查文档基础上终于解决了这个问题。再次记录，希望能够使其他使用此框架上传图片的初学者少走弯路。
目录：
1.web uploader前台代码实现
2.Java后台接收处理
3.前台图片回显（多张图片上传）

一.前台代码：web uploader

1.前台js，需要注意上传方式一定要设置成 sendAsBinary: true 。用火狐浏览器调试时，可以看到设置后上传content-type 为image类型。（这里只是代码片段，需要注意的地方，并不完全）

        /*图片上传*/
        jQuery(function() {
            var $ = jQuery,
                    $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,
            // 缩略图大小
                    thumbnailWidth = 100 * ratio,
                    thumbnailHeight = 100 * ratio,
            // Web Uploader实例
                    uploader;
            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 自动上传。
                auto: true,

                // 文件接收服务端。
                server: '/uploadPic',// 此处服务器测试时可以写本地服务，上传的Java后台请求地址
                sendAsBinary: true,// 上传方式

                pick : {
                    id : '.filePicker',
                    //只能选择一个文件上传
                    multiple: false
                    
                },
                duplicate:true,//可以重复
                resize : true,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                // 只允许选择文件，可选。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,png,jpeg',
                    mimeTypes: 'image/*'
                },
            })
        });

二.Java后台接受处理

@RequestMapping(value = "/uploadPic", method = RequestMethod.POST)
	public void uploadPic(HttpServletRequest request, HttpServletResponse response) throws Exception {
   
		String name = request.getParameter("name");// 文件名称
		String type = name.substring(name.lastIndexOf(".") + 1);// 文件类型
		name = DateTools.getDateAndTime() + "." + type;// 重新定义图片名称，DateTools.getDateAndTime() 工具类，产生时间戳短码，可以自己根据需求重新定义 
		
		String path ="xxx";//这里保存图片路径 D:\ 这样
		path = path + File.separator + name