使用jquery、Vue 文件图片上传到阿里云OSS

工作中经常会遇到，捏个谁谁谁在前端把图片传到服务器，然后把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