springboot+七牛云+html上传图片

pom部分

<!-- qiniu -->
<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>7.2.0</version>
</dependency>

 

首先是html部分--前端使用的是bootstrap

<div class="row">
    <div class="col-sm-3">
        <div class="form-group">
            <label class="col-sm-5 control-label">产品图片</label>
            <div class="col-sm-6">
                <input class="form-control" type="file" id="imageFile" οnchange="ProductInfoDlg.uploadImg()" name="imageFile">
            </div>
        </div>
    </div>
    <input id="image" name="image" type="hidden">
    <input id="imageName" name="imageName" type="hidden">
</div>
<div class="row" id="showImage" style="display:none">
    <div class="col-sm-3">
        <div class="form-group">
            <label class="col-sm-5 control-label"></label>
            <div class="col-sm-3">
                <img src="" id="upImage" class="img-rounded" width="150" height="150">
                <a οnclick="ProductInfoDlg.removeImg()" style="margin-left: 65px;">
                    <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</div>

 application.yml配置文件部分

qiniu:
  accessKey: 8sK3a8CKpxBI01X-机密。。。
  secretKey: _0nkPMSkE8l3a2fRnWF-机密。。
  bucket: gaokao
  domian: http://******

baseUploadUrl: d://temp/

然后是js部分

/**
 * 上传图片
 */
ProductInfoDlg.uploadImg = function () {
    var formData = new FormData();
    formData.append("image", $("#imageFile")[0].files[0]);
    $.ajax({
        url: Feng.ctxPath + "/policyNews/uploadImg", /*接口域名地址*/
        type: 'post',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.code == "200") {
                $("#upImage").attr("src", data.content.url);
                $("#image").val(data.content.url);
                $("#imageName").val(data.content.imageName);
                $("#showImage").show();
                Feng.success("上传成功!");
            } else {
                Feng.error("上传失败!" + data.message);
            }
        }
    })
};

/**
 * 移除已上传的图片
 */
ProductInfoDlg.removeImg = function () {
    var key = $("#imageName").val();
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/policyNews/removeImg", function (data) {
        $("#upImage").attr("src", "");
        $("#image").val("");
        $("#imageFile").val("");
        $("#imageName").val("");
        $("#showImage").hide();
    }, function (data) {
        Feng.error("移除失败!" + data.responseJSON.message + "!");
    });
    ajax.set("key", key);
    ajax.start();
};

/**
 * 初始化回显上传的图片
 */
$(function () {
    var image = $("#image").val();
    if (image) {
        $("#showImage").show();
        var str = image.split("/");
        $("#imageName").val(str[str.length - 1]);
    }
});

 后端java部分

控制类中的代码

/**
 * 上传图片
 */
@RequestMapping(value = "/uploadImg",method = RequestMethod.POST)
@ResponseBody
public ResponseData uploadImg(@RequestParam(value = "image") MultipartFile image) {
    return policyNewsService.uploadImg(image);
}

/**
 * 移除图片
 */
@RequestMapping(value = "/removeImg")
@ResponseBody
public Object removeImg(@RequestParam String key) {
    policyNewsService.removeImg(key);
    return SUCCESS_TIP;
}

业务类中的代码

@Autowired
private UploadManager uploadManager;

@Autowired
private BucketManager bucketManager; 

@Value("${baseUploadUrl}")
private String url;

@Value("${qiniu.bucket}")
private String bucket;

@Value("${qiniu.domian}")
private String domian;

 

@Override
public ResponseData uploadImg(MultipartFile image) {
    ResponseData responseData;
    try {
        Map map = new HashMap();
        String fileName = String.valueOf(System.currentTimeMillis());
        File file = new File(url + fileName);
        //将MulitpartFile文件转化为file文件格式
        image.transferTo(file);
        Response response = this.uploadManager.put(file, null, getUploadToken());
        //解析上传的结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);

        String imageName = putRet.hash;
        int retry = 0;
        while (response.needRetry() && retry++ < 3) {
            response = this.uploadManager.put(file, null, getUploadToken());
        }
        map.put("url", domian + imageName);
        map.put("imageName", imageName);
        responseData = ResponseData.ok().setContent(map);
    } catch (IOException e) {
        e.printStackTrace();
        responseData = ResponseData.error().setMessage(e.getMessage());
    }

    return responseData;
}

@Override
public void removeImg(String key) {
    try {
        bucketManager.delete(this.bucket, key);
    } catch (QiniuException e) {
        e.printStackTrace();
    }

}