javaScript 上传图片（oss阿里云）

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

直接上干货分享：

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

使用步骤：

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

            

 
 0/3

     

            
    

    

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

        

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 = ''
$('.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 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 map = new HashMap();
String deal_id = dealInfoService.saveDealInfo(user_id, title, type_name, content, community_id);
List 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;
}