oss php 签名,oss web服务端签名后直传 图片上传

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