javaScript 上传图片（oss阿里云） - 好文

最近项目有这个这块的需求，简单的记录一下使用过程，以便以后学习、使用。

直接上干货分享：

思路：前端js获取 oss上传图片的url地址，将url以json数组形式传入后台，后台json解析将数据存入数据库（这里用的是fastjson）

使用步骤：

1、前端页面有图片上传的图标，并且增加图片上传的input隐藏域，便于拿到上传的图片信息

            <div class="middle_div3">
<img src="../img/iconn01.png" id="upload_img" class="img_2" />
<span id="num">0/3</span>

</div>

            <input type="hidden" name="fold" value="photo" style="display:
none;">
    <input type="file" size="30" class="file-img" name='file' id="ossfile"
capture="camera"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
style="display: none;">

    <span id="progress-bar" style="display: none;"></span>

2、引入阿里云官方提供的javaScript库，在js中配置自己的阿里云账号等一些信息

        <script type="text/javascript"
src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js "></script>

<script type="text/javascript" src="../js/oss.js"></script>

3、获取上传图片的url，控制图片为3个

                // oss图片上传
//判断安卓还是ios
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
//android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
$(".img_2").click(function() {
if(isiOS) {
$('#ossfile').removeAttr("capture");
$("#ossfile").click();
}
$("#ossfile").click();
})

//获取上传图片的url

var img_list = []; //图片url地址数组
var num = 0;
function outDone(f_url) { //输出url
var content = '<img src="' + f_url + '" class="img_2"/>'
$('.middle_div3 img:last').before(content);
img_list.push({"file_value": f_url}); //将json格式的数据存入数组
num++;
$("#num").html(num + '/3');
if(img_list.length == 3) {
$("#upload_img").hide();
}
return f_url;

}

4、将url数组转换为json字符串数组，传入controller接口中，做业务逻辑，存入数据库，便于记录查询

var json_body = JSON.stringify(img_list);

$.ajax({

type: "post",
url: "http://localhost/estuary-busi/index/submit_xwzl_info.do",
async: true,
data: {
user_id: user_id,
title: title,
type_name: type_name,
content: content,
json_body: json_body,
community_id: community_id
},
dataType: "json",
success: function(result) {
msg("发布成功");
window.location.reload();
},
error: function() {
console.log("获取失败");
}
});

ps: oss.js 相关内容

'use strict';
var appServer = 'http://47.96.71.3:7103/index2/getSt.do';
var bucket = 'kyky';
var region = 'oss-cn-beiji';
var domain = 'http://kyyy.oss-cn-beijin.aliyuncs.cm';

var urllib = OSS.urllib;
var Buffer = OSS.Buffer;
var OSS = OSS.Wrapper;

document.getElementById('ossfile').onchange = function() {
applyTokenDo(uploadFile);
}

var applyTokenDo = function (func) {
var url =appServer;
return urllib.request(url, {
method: 'GET'
}).then(function (result) {
var creds = JSON.parse(result.data).result_info;
var client = new OSS({
region: region,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket
});
return func(client);
});
};

var progress = function (p) {
return function (done) {
var bar = document.getElementById('progress-bar');
bar.style.width = Math.floor(p * 100) + '%';
bar.innerHTML = Math.floor(p * 100) + '%';
done();
}
};
var uploadFile = function (client) {
var file = document.getElementById('ossfile').files[0];
if(file==null){
return;
}
var timestamp=new Date().getTime();
var key = "product/"+timestamp+"."+file.name.split(".")[1];
//console.log(file.name + ' => ' + key);
return client.multipartUpload(key, file, {
progress: progress
}).then(function (res) {
var fileUrl="";
if(res.url!=null){
fileUrl=res.url;
}else{
fileUrl=domain+"/"+res.name;
}
//console.log(fileUrl);
outDone(fileUrl); //获取图片上传的url地址
//console.log('upload success: %j', res);
return null;
});
};

java：controller相关代码

/**
* 意见反馈
*
* @param user_id
* 用户编码
* @param title
* 标题
* @param type_name
* 类型名称
* @param content
* 内容
* @param json_body
* 图片数据(Json字符串数组)
* @param community_id
* 小区编码
* @return map
*/
@RequestMapping(value = "submit_yjfk_info")
@ResponseBody
public Map<String, Object> submit_yjfk_info(String user_id, String title,
String type_name, String content,
String community_id, String json_body) {
if (StringUtils.isBlank(user_id)) {
throw new BusinessException("账户异常");
}
Map<String, Object> map = new HashMap<String, Object>();
String deal_id = dealInfoService.saveDealInfo(user_id, title, type_name,
content, community_id);
List<UserInfoAtt> arrlist = JSON.parseArray(json_body, UserInfoAtt.class);
if (!CollectionUtils.isEmpty(arrlist)) {
for (UserInfoAtt att : arrlist) {
userInfoAttService.saveUserInfoAtt(user_id, "意见反馈图片", att.getFile_value(), 3,
deal_id);
}
}
map.put("deal_id", deal_id);
return map;
}

热门工具换一换