七牛上传图片html,springboot+七牛云+html上传图片

pom部分

com.qiniu

qiniu-java-sdk

7.2.0

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

产品图片

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();

}

}