关于上传图片资源到阿里云oss

• 首先阿里云oss是个啥东西?

  阿里云 OSS（Object Storage Service）为您提供基于网络的数据存取服务。使用 OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种结构化或非结构化数据文件。
  阿里云 OSS 将数据文件以对象（object）的形式上传到存储空间（bucket）中。 您可以创建一个或者多个存储空间，然后向每个存储空间中添加一个或多个文件。您可以通过获取已上传文件的地址进行文件的分享和下载。您还可以通过修改存储空间或文件的属性或元信息来设置相应的访问权限。
  以上这些就是阿里云官网的简介!!!

• 废话少说 直接看怎样操作

  这篇文章介绍的是使用JQurey上传图片资源到oss 使用其他框架的小伙伴建议去看下官方的文档介绍 避免采坑(留下了痛苦的眼泪)
  先看介绍讲解 下面会贴出完整代码

第一步: 引入资源文件

	<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>

第二步: oss服务器配置

    var client = new OSS.Wrapper({
        region: "oss-ap-bbbbbbbb-1", //oss服务器创建的地点(代替)
        accessKeyId: "***********",//访问控制中创建的accesskeyId(找自己的)
        accessKeySecret: "**********",//accesskeyId对应的密钥(找自己的)
        bucket: "abcde"  //oss服务器上创建的bucket的名称
    });

第三步: 整理你要上传的图片(file格式)

     let img = document.getElementById("filePhoto").files[0];
     //这里根据需求可以选择拼接文件名或者使用文件原本的文件名
     let suffix = img.name.split(".")[1]; // 获取文件后缀名
     //下debt为要存储的文件夹 (根据实际需求) 
     let filename = 'debt/'+  new Date().getTime() + 0 + "." + suffix; // 为文件命名
     
     //听说这里有个坑(请求跨域) 我没遇到! 解决方案:添加: img.crossOrigin = "Anonymous";

第四步: 发送请求上传图片

	 client.multipartUpload(filename, img).then(res => {
	 	console.log(res)
	 }).catch(err => {
	 	console.log(err)
	 })

就这几步基本搞定 下面看下请求和响应
请求的地址:

http://abcde.oss-ap-oss-ap-bbbbbbbb-1.aliyuncs.com/debt/346516167529280070.jpg

返回的信息

{
name: "debt/346516167531471450.jpg"
res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …}
url: "`http://abcde.oss-ap-oss-ap-bbbbbbbb-1.aliyuncs.com/debt/346516167529280070.jpg"
}

这就成了 一般后端存储的话都是要一个name 和 url 就ok了

完整代码块

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
   var client = new OSS.Wrapper({
            region: "oss-ap-bbbbbbbb-1", //oss服务器创建的地点(代替)
            accessKeyId: "***********",//访问控制中创建的accesskeyId(找自己的)
            accessKeySecret: "**********",//accesskeyId对应的密钥(找自己的)
            bucket: "abcde"  //oss服务器上创建的bucket的名称
        });
	
//上传照片
    function updataPhoto(id) {
        $("#filePhoto").unbind().change(function () {//监听图片上传事件
            let img = document.getElementById("filePhoto").files[0];
            //拼接文件名及后缀(也可直接使用原本的文件名)
            //img.crossOrigin = "Anonymous";
            let suffix = img.name.split(".")[1]; // 获取文件后缀名
            let filename = 'debt/' + id + new Date().getTime() + 0 + "." + suffix; // 为文件命名
            client.multipartUpload(filename, img)
                .then((result) => {
                    console.log('result', result
                })
                .catch(function (err) {
                    console.log(err);
                });
        	})
       }

感谢阅读!!!