SpringMVC 文件上传以及整合七牛云

需求：
最近在写自己的小玩具中, 有一个需求是是展示数量不多的轮播图.
方案一：自己搭建一个 ftp 服务器上传图片 然后再搭建一个 nginx 服务器来访问
方案二：采用七牛云存储平台
这里我采用的是方案二 因为上传的数量并不多, 不用费劲用搭建静态资源服务器.

第零步: 准备工作

关于七牛云的介绍和注册使用读者可以自己查看官网
https://www.qiniu.com/
使用七牛云作为图片等静态资源存储的话 查看 对象存储功能。
在实现上传文件到七牛云之前需要准备三个东西。
String accessKey = "your access key"; // 个人中心密钥管理中的 AK
String secretKey = "your secret key"; // 个人中心密钥管理中的 SK
String bucket = "your bucket name"; // 对象存储空间名

第一步: 加入七牛云的官方 sdk

pom.xml

<!-- 上传图片到七牛云 -->
<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>7.2.0</version>
</dependency>

​

第二步: 编写前端页面

editUserInfo.jsp

<!-- 上传图片是需要指定属性 enctype="multipart/form-data" -->
<form id="userForm" action="${pageContext.request.contextPath }/updateUserInfo.action" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="${user.id }"/>
    <table width="100%" class="gridtable">
        <tr>
            <td>用户昵称</td>
            <td><input type="text" name="name" value="${user.name }"/></td>
        </tr>
       
        <tr>
            <td>注册时间</td>
            <td><input type="text" name="createtime"
                       value="<fmt:formatDate value="${user.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td>
        </tr>
        <tr>
            <td>用户头像</td>
            <td>
                <input type="hidden" name="pic" value="${user.avatar }"/>
                <c:if test="${user.avatar !=null}">
                    <img src="${user.avatar}" width=100 height=100 id="preview" />
                    <br/>
                </c:if>
                <input type="file" name="pictureFile" onchange="imgPreview(this)"/>
            </td>
        </tr>
        <tr>
            <td>签名档</td>
            <td><textarea rows="3" cols="30" name="signature">${user.signature }</textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="提交"/>
            </td>
        </tr>
    </table>

</form>
<script type="text/javascript">

	<!-- 实现上传图片预览功能 -->
    function imgPreview(fileDom){
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
</script>
​

第三步: 编写上传图片工具类

UploadUtil.java

/**
 * 上传图片到七牛云
 */
public class UploadUtil {

    /**
     * 上传文件到七牛云, 并返回网络地址
     *
     * @param file
     * @return
     */

    public static String uploadImgToQiuniu(MultipartFile file) throws Exception {

        String imgUrl = "";

        Configuration cfg = new Configuration(Zone.zone0());

        //...其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);
        //...生成上传凭证，然后准备上传
        String accessKey = Constant.ACCESS_KEY;
        String secretKey = Constant.SECRET_KEY;
        String bucket = Constant.BUCKET;

        // 如果不指定 key 值，以文件内容的 hash 值作为文件名
        // 获取原文件名的后缀
        String originalFilename = file.getOriginalFilename();
        String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
        String key = UuidUtil.getUUID() + extName;
        try {
            byte[] uploadBytes = file.getBytes();
            Auth auth = Auth.create(accessKey, secretKey);
            String upToken = auth.uploadToken(bucket);
            try {
                Response response = uploadManager.put(uploadBytes, key, upToken);
                //解析上传成功的结果
                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
                System.out.println(putRet.key);
                System.out.println(putRet.hash);
                imgUrl = Constant.QIUNIU_DOMAIN + "/" + putRet.key;
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        } catch (UnsupportedEncodingException ex) {
            //ignore
        }
        return imgUrl;
    }
​

编写一个常量 constant.java

package com.liuyishi.ssm.constant;

public interface Constant {

   String ACCESS_KEY = "5KolRGQ4iB***SwNk9dj1hno";
   String SECRET_KEY = "YIYRKoDbtpr***rw3cQ6Qcu67a9q5JnkgJ";
   String BUCKET = "develop";
   String QIUNIU_DOMAIN = "http://p5b***eis.bkt.clouddn.com";

}
​

第四步: 编写 UserController

@RequestMapping("/updateUserInfo")
   public String updateImg(User user, MultipartFile pictureFile) throws Exception {

       System.out.println("pictureFile = " + pictureFile);

       if (pictureFile.getSize() != 0) {
           String path = UploadUtil.uploadImgToQiuniu(pictureFile);
           items.setPic(path);
       }

       // 调用service的方法 更新数据库
       userService.updateUserInfo(user);

       return "redirect:/userList.action";
   }

​

至此, 整个上传图片到七牛云的功能实现.