webuploader+springmvc实现图片上传功能

前提条件
在使用webuploader+springmvc进行图片上传之前，需要确保以下条件已准备就绪：
服务器环境：
- JDK：1.8及以上；
- Tomcat：7.0及以上；
- SpringFramework：4.0.9及以上；
- Maven或Gradle；
- webuploader插件。
整体思路：
- 利用webuploader插件进行文件上传，前端通过ajax向服务器发送请求；
- 后端使用SpringMVC框架接收请求，并对接收到的文件进行处理。
Maven依赖配置
添加以下依赖来实现文件上传功能：

<!--webuploader依赖-->
<dependency>
    <groupId>com.github.tobato</groupId>
    <artifactId>fastdfs-client-java</artifactId>
    <version>1.27-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>com.github.tobato</groupId>
    <artifactId>fastdfs-common</artifactId>
    <version>1.27-SNAPSHOT</version>
</dependency>

<!--SpringMVC依赖-->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.6.RELEASE</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.8</version>
</dependency>

配置fastDFS
fastDFS是一款开源的分布式文件系统，支持海量文件的存储和访问。本例中使用的是fastdfs-client-java：一个Java客户端。

修改application.properties文件，添加如下配置：

fdfs.connect_timeout=5000
fdfs.network_timeout=50000
fdfs.charset=UTF-8
fdfs.http.tracker_http_port=80
fdfs.http.anti_steal_token=false
fdfs.http.secret_key=
fdfs.tracker_servers=192.168.2.111:22122,192.168.2.112:22122

涉及代码实现

1) 前端页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>webuploader+springmvc示例</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="webuploader.css">
</head>
<body>
<h3 style="text-align:center;">webuploader+springmvc示例</h3>
<div id="uploader" class="wu-example">
    <div class="queueList">
        <div id="dndArea" class="placeholder">
            <div id="filePicker"></div>
            <p>或将文件拖到此处，单次最多可选300张</p>
        </div>
    </div>
    <div class="statusBar" style="display:none;">
        <div class="progress">
            <span class="text">0%</span>
            <span class="percentage"></span>
        </div><div class="info"></div>
        <div class="btns">
            <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="webuploader.js"></script>
<script type="text/javascript">
    var $list = $('#fileList');
    var $btn = $('#ctlBtn');
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: false,

        // swf文件路径
        swf: 'Uploader.swf',

        // 文件接收服务端。
        server: '/upload/uploadImg',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="caption">' + file.name + '</div>' +
            '</div>'
        ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 100, 100 );

        // 绑定删除事件
        $li.on('click', function() {
            $li.fadeOut();
            uploader.removeFile(file);
        });
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );
    });

    uploader.on('uploadSuccess', function(file, response) {
        $( '#'+file.id ).find('p.state').text('已上传');
        console.info('图片上传成功', response.imgPath, response.fileName);
    });

    uploader.on('uploadError', function(file) {
        $( '#'+file.id ).find('p.state').text('上传出错');
        console.info('图片上传失败', file);
    });

    uploader.on('uploadComplete', function(file) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    $btn.on( 'click', function() {
        uploader.upload();
    });
</script>
</body>
</html>

2) 后端代码

@Controller
@RequestMapping("/upload")
public class UploadController {
    private static Logger logger = LoggerFactory.getLogger(UploadController.class);

    @Autowired
    private FastDFSUtil fastDFSUtil;

    /**
     * 跳转到上传图片页面
     */
    @GetMapping("/toUploadImgPage")
    public String toUploadImgPage() {
        return "uploadImg";
    }

    /**
     * 上传图片
     */
    @RequestMapping(value = "/uploadImg")
    @ResponseBody
    public RenderUtil uploadImg(@RequestParam(value = "file", required = false) MultipartFile file) {
        try {
            String fileName = file.getOriginalFilename();
            String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
            String imgPath = fastDFSUtil.upload(file.getBytes(), suffix);

            return RenderUtil.ok("imgPath", imgPath).put("fileName", fileName);
        } catch (IOException e) {
            logger.error("upload img failed", e);
            return RenderUtil.error("上传图片失败！");
        }
    }
}

3) FastDFS上传工具类

@Component
public class FastDFSUtil {
    private static final Logger logger = LoggerFactory.getLogger(FastDFSUtil.class);

    private static final String CONFIG_FILENAME = "fdfs_client.conf";

    @PostConstruct
    public void init() {
        try {
            ClientGlobal.init(this.getClass().getClassLoader().getResource(CONFIG_FILENAME).getFile());
        } catch (IOException | MyException e) {
            logger.error("FastDFS客户端初始化失败", e);
        }
    }

    /**
     * 上传文件
     * @return 图片访问地址
     */
    public String upload(byte[] file, String suffix) {
        // 创建tracker客户端
        TrackerClient trackerClient = new TrackerClient();
        try {
            // 获取连接
            TrackerServer trackerServer = trackerClient.getConnection();
            // 获取storage客户端
            StorageServer storageServer = null;
            StorageClient1 storageClient1 = new StorageClient1(trackerServer, storageServer);
            String fileId = storageClient1.upload_file1(file, suffix, null);
            return fileId;
        } catch (IOException | MyException e) {
            logger.error("upload file failed", e);
        }
        return null;
    }
}