阿里oss 实现文件上传（前端代码）

1.本人项目使用jquery写的，而阿里云oss代码是原生js所以有些地方会两者共用。
2.这里只展示前端的代码部分，整个流程是由后台生成签名–>前端点击上传文件的时候获取到后台返回的accessid、host、policy、signaturecom等参数–>请求成功并获取到返回参数后前端将这些参数重新赋值（祥见代码），赋值成功后oss的puload组件会自动提交到后台返回的host参数内的链接地址。–>此时文件提交就成功了
3.本次项目使用的是阿里云oss的服务端签名直传并设置回调。

4.下载客户端源码

5.因为本人项目用的jquery所以就直接在项目中引用了源码，如果是vue或者其他框架的话也可以npm进行安装plupload，我这里是直接script标签引入文件包

6.接下来就是在源码内根据需求进行更改开发

accessid = ''
accesskey = ''
host = ''
policyBase64 = ''
signature = ''
filename = ''
key = ''
expire = new Date().getTime() + 1000 * 60 * 30//设置签名过期时间，如果是后台设置该参数，则前端可以忽略不设置。
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000;
function send_request(opt) {//ajax封装，源码内使用的是原生xmlhttp进行的请求，为了项目方便进行了重新封装。
opt = opt || {};
opt.method = (opt.method || 'GET').toUpperCase();
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {
};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
function get_signature() {//这里是对签名时间进行判断，如果签名过期时间是后台设置则暂且不需要考虑这一块
// 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。
now = timestamp = Date.parse(new Date()) / 1000;
if (expire < now + 3) {
body = send_request()
var obj = eval("(" + body + ")");
host = obj['host']
policyBase64 = obj['policy']
accessid = obj['accessid']
signature = obj['signature']
expire = parseInt(obj['expire'])
// callbackbody = obj['callback']
key = obj['dir']
return true;
}
return false;
};
function random_string(len) {//随机字符串
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
pos = filename.lastIndexOf('.')
suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
function calculate_object_name(filename) {//把随机好的字符串拼接在上传文件名后面生成新的文件名进行保存
suffix = get_suffix(filename)
g_object_name = key + random_string(10) + suffix
console.log(g_object_name)
return ''
}
function set_upload_param(up, filename, ret) {//设置阿里云提交文件所需的参数
if (ret == false) {
ret = get_signature()
}
g_object_name = key;
if (filename != '') {
suffix = get_suffix(filename)
calculate_object_name(filename)
}
new_multipart_params = {//设置阿里云进行文件提交保存时的参数
'key': g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
// 'callback': callbackbody,
'signature': signature,
};
up.setOption({
'url': host,
'multipart_params': new_multipart_params
});
up.start();
}
var uploader = new plupload.Uploader({//阿里oss plupload上传组件
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'selectfiles',
//multi_selection: false,
container: document.getElementById('container'),
flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url: 'lib/plupload-2.1.2/js/Moxie.xap',
url: 'http://oss.aliyuncs.com',
filters: {
mime_types: [ //只允许上传图片和zip文件
{title: "Image files", extensions: "jpg,gif,png,bmp"},
{title: "Zip files", extensions: "zip,rar"},
{title: "Apk files", extensions: "apk"}
],
max_file_size: '100mb', //最大只能上传10mb的文件
prevent_duplicates: true //不允许选取重复文件
},
init: {
PostInit: function () {
document.getElementById('ossfile').innerHTML = '';
document.getElementById('postfiles').onclick = function () {//点击开始上传
var url = '/im/VersionManage/getSignature';
var url1 = '/im/VersionManage/downLoadUrlTest';
send_request({//这里是点击上传获取签名等信息之后阿里云利用Plupload组件进行post请求上传文件
url: url,
metod: "GET",
async: false,
success: function (data) {//获取到后台返回参数后进行赋值
var d = JSON.parse(data).data
accessid = d.accessid;
policyBase64 = d.policy;
signature = d.signaturecom;
host = d.host;
set_upload_param(uploader, '', false);//这一步是给g_object_name赋值的，如果不先执行这一步下面data上传的key值就为空
send_request({//封装的ajax调用，后台会获取到阿里云返回的文件url，前端请求该后台接口获取url，以下代码都是根据实际项目需求写的代码。
url: url1,
method: 'GET',
data: {key: g_object_name},
async: false,
success: function (data) {
console.log(g_object_name)
if (JSON.parse(data).code == 1 && g_object_name !== '') {//此判断条件是为了防止用户直接点击开始上传给予提示
new_file_name = g_object_name;
document.getElementById('ossfile').setAttribute("data-name", new_file_name)//设置自定义属性，让package_url能获取到新生成的文件名
console.log(JSON.parse(data).data)//获取到阿里云返回的url
}else{
parent.modal.operModal({
info: '请选择文件',
className: 'WaitPay'
});
}
}
})
},
});
return false;
};
},
FilesAdded: function (up, files) {//上传文件名、大小、进度条提示标签
plupload.each(files, function (file) {
key = file.name
// console.log(new_file_name)
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + '<b></b>'
+ '<span class="versionurl">' + file.name + '</span>'
+ '<span class="size">' + '(' + plupload.formatSize(file.size) + ')' + '</span>'
+ '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+ '</div>';
$("#versionurl").val(file['name']);//这里是根据项目需求添加的jquery代码
$('#upPackgeUrl').attr('disabled', 'disabled');
});
},
BeforeUpload: function (up, file) {
// check_object_radio();
set_upload_param(up, file.name, true);
},
UploadProgress: function (up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width = 2 * file.percent + 'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
FileUploaded: function (up, file, info) {
// console.log(file.name)
if (info.status == 200) {
console.log(up, file, info)
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传成功';//这里根据项目需求删除了一点代码，具体可参考源代码
}
else if (info.status == 203) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传到OSS成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + info.response;
}
else {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
}
},
Error: function (up, err) {
if (err.code == -600) {
document.getElementById('console').appendChild(document.createTextNode("n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小"));
}
else if (err.code == -601) {
document.getElementById('console').appendChild(document.createTextNode("n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型"));
}
else if (err.code == -602) {
document.getElementById('console').appendChild(document.createTextNode("n这个文件已经上传过一遍了"));
}
else {
document.getElementById('console').appendChild(document.createTextNode("nError xml:" + err.response));
}
}
}
});
uploader.init();

最后

以上就是多情月饼为你收集整理的阿里oss 实现文件上传（前端代码）的全部内容，希望文章能够帮你解决阿里oss 实现文件上传（前端代码）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。