工作中经常会遇到,捏个谁谁谁在前端把图片传到服务器,然后把key发给我。。。我:emmmmmmm~~~~~!很想回怼回去,但是看到大佬们 ‘倔强’ 的眼神,还是怂了下来,诺诺的说一句‘嗯’!
好了闲话不多说,下面给大家写了两种方法利用jquery和Vue把要传的文件传送到阿里云OSS上。
一、jquery
<input type="file" onchange="ossUpload(this)"/>
<script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="lib/base64.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script>
ossUpload = function (e){
console.log(e)
console.log($(e).get(0).files[0])
let file = $(e).get(0).files[0]
/**公司的K */
let accessid = '';
let accesskey = '';
let host = '';//自己公司的OSS 地址
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText))
var message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
asBytes: true
});
var signature = Crypto.util.bytesToBase64(bytes);
var g_object_name = '可以自定义名字' + file.type.split('/')[1]
console.log(g_object_name)
var callbackbody = console.log
// return false;
//组装发送数据
var request = new FormData();
request.append("OSSAccessKeyId", accessid); //Bucket 拥有者的Access Key Id。
request.append("policy", policyBase64); //policy规定了请求的表单域的合法性
request.append("Signature", signature); //根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
//---以上都是阿里的认证策略
request.append("key", g_object_name); //文件名字,可设置路径
request.append("success_action_status", '200'); // 让服务端返回200,不然,默认会返回204
request.append('file', file); //需要上传的文件 file
request.append("callback", callbackbody); //回调,非必选,可以在policy中自定义
$.ajax({
url: host, //上传阿里地址
data: request,
processData: false, //默认true,设置为 false,不需要进行序列化处理
cache: false, //设置为false将不会从浏览器缓存中加载请求信息
async: false, //发送同步请求
contentType: false, //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
dataType: 'xml', //不涉及跨域 写json即可
type: 'post',
success: function(callbackHost, request) { //callbackHost:success,request中就是 回调的一些信息,包括状态码什么的
console.log(arguments)
var name = $this.attr("name");
$this.closest("li").append("<span class='img-span'><img src=" + host + "/" +get_uploaded_object_name(file.name) +//">"); //动态向页面添加上传图片
alert("图片上传成功!")
},
error: function(returndata) {
console.log(arguments)
alert("上传图片出错", false);
}
});
}
</script>
里面的标注很全,看不懂的小伙伴欢迎评论!
二、Vue
let file = e.target.files[0],
that = this;
/**公司的K */
let accessid = "";
let accesskey = "";
let host = "";//自己公司的OSS地址
var policyText = {
expiration: "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
conditions: [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText));
var message = policyBase64;
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
asBytes: true
});
var signature = Crypto.util.bytesToBase64(bytes);
var g_object_name = '自定义名称'+file.type.split("/")[1];
// console.log(g_object_name);
var callbackbody = console.log;
// return false;
//组装发送数据
var request = new FormData();
request.append("OSSAccessKeyId", accessid); //Bucket 拥有者的Access Key Id。
request.append("policy", policyBase64); //policy规定了请求的表单域的合法性
request.append("Signature", signature); //根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
//---以上都是阿里的认证策略
request.append("key", g_object_name); //文件名字,可设置路径
request.append("success_action_status", "200"); // 让服务端返回200,不然,默认会返回204
request.append("file", file); //需要上传的文件 file
request.append("callback", callbackbody); //回调,非必选,可以在policy中自定义
let config = { headers: { "Content-Type": "multipart/form-data" } };
that.$axios.post(host, request, config).then(function(response) {
if (response.status === 200 || response.request.status == 200) {
that.$message.success("图片上传成功!");
} else {
that.$message.error("图片上传失败!");
}
});
备注还算清晰吧!不懂的小伙伴可以留言评论!
引入的JS文件https://download.csdn.net/download/jensen_yao/10850150