web直传oss
.file-box {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
background: url(img/aaa.png) no-repeat;
background-size: cover;
background-position: center;
}
#input_file {
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
}
oss web服务端签名后直传
οnchange="imgPreview(this,0)">
let uploadObj; // 上传凭证对象
let verifyImg; //上传之后的图片oss地址
function imgPreview(fileDom, i) {
// 获取上传凭证
$.ajax({
url: '', // 这里是请求的后台通过oss上传凭证的接口
data: JSON.stringify({
data: ''
}),
dataType: 'json',
type: 'post',
headers: {
'Content-Type': 'application/json',
},
success: function(response) {
if (response && response.header.ret == 'S') {
uploadObj = response.data;
// 获取到上传凭证成功之后 封装请求的数据
let request = new FormData();
request.append("OSSAccessKeyId", uploadObj.accessid); //Bucket 拥有者的Access Key Id。
request.append("policy", uploadObj.policy); //policy规定了请求的表单域的合法性
request.append("Signature", uploadObj.signature); //根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
//---以上都是阿里的认证策略
let file = document.getElementById("input_file").files[0];
if (!file) {
return;
}
request.append("key", `${uploadObj.dir}/${file.name}`); //文件名字，可设置路径
request.append("success_action_status", '200'); // 让服务端返回200,不然，默认会返回204
request.append('file', file); //需要上传的文件 file
$.ajax({
url: uploadObj.host, //上传阿里地址
data: request,
processData: false, //默认true，设置为 false，不需要进行序列化处理
cache: false, //设置为false将不会从浏览器缓存中加载请求信息
async: false, //发送同步请求
contentType: false, //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
dataType: 'json', //不涉及跨域 写json即可
type: 'post',
success: function(response) { //callbackHost：success,request中就是 回调的一些信息，包括状态码什么的
// console.log(response);
},
error: function(error) {
alert("上传图片成功");
verifyImg = `${uploadObj.host}/${uploadObj.dir}/${file.name}`;
}
});
} else {
alert(`${response && response.header.msg[0]}`);
}
},
error: function(error) {
console.log(error);
},
});
console.log(`上传的文件oss地址${verifyImg}`);
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
}
//获取文件
var file = fileDom.files[0];
if (!file) {
return;
}
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片！");
return;
}
//读取完成
reader.onload = function(e) {
//图片路径设置为读取的图片
// img.src = e.target.result;
document.getElementsByClassName('file-box')[i].style.background = "url(" + e.target.result + ")no-repeat"; //回显图片
document.getElementsByClassName('file-box')[i].style.backgroundSize = '';
};
reader.readAsDataURL(file);
}
效果如下
项目源码地址 https://github.com/Pangnz/OssUpload