阿里云： web如何直传oss & 常见问题 & oss图片的常用处理

一、web如何直传oss（阿里云官网对应产品服务是：对象存储 OSS）

阿里云官网文档：

1. 对象存储OSS：存储空间（Bucket）

注意事项：

1. 每新建一个bucket, 其对应的endpoint域名可能变化，需查看OSS后台（一个bucket对应一个endpoint）。

2. 若访问oss图片（即oss图片链接），报CORS问题，需要在OSS后台，配置可访问域名的白名单。

3. bucket 类似存储桶目录，可在bucket下新建子目录（用于存放图片资源等），然后前端上传到子目录下（storeAs字段）

3. bucket命名规范：只能包括小写字母，数字和短横线（-），必须以小写字母或者数字开头，命名长度限制在3到63字节之间。

（1）先下载 ali-oss库：npm i ali-oss

（2）在.vue页面中使用：

import OSS from 'ali-oss';

... // 省略的code

const OSSOptions = {
    endpoint: 'https://oss-xxx.aliyuncs.com', // 阿里云域名（注意：可以写http或https, 但如果系统是https, 必须用https）
    accessKeyId: 'xxxxxxxxx',
    accessKeySecret: 'xxxxxxx', // 密钥
    bucket: 'xx-xx', // 存储桶名（类似大类别目录名）
};
const ossClient = new OSS(OSSOptions); // OSS的实例对象

/**
 * 图片上传OSS
*/
uploadImagesToOSS () {
  const ossImageslist: { ossUrl: string; title: string }[] = [];
  // 限制oss返回的图片按指定大小显示（按宽度为180px等比缩放、保真度为80%）
  const displaySize = '?x-oss-process=image,w_180,m_lfit/format,webp/quality,q_80'; 
  const storeAs = 'goods_images_xxx/'; // OSS图片文件存放位置（即在OSS上的目录名）
  
  const promiseList: Promise<any>[] = [];
  files.forEach((item) => {
    // 图片名称：需添加时间戳, 避免重名
    const ext = item.name.split('.').pop() || '';
    const rename = item.name.split(ext)[0] + new Date().getTime() + '.' + ext;
    promiseList.push(ossClient.put(storeAs + rename, item));
  });
  const resultList = await Promise.allSettled(promiseList);
  resultList.forEach((item) => {
    const { url, name } = item.value;
    list.push({ title: name, url: url + displaySize });
  });
  return ossImageslist;
}

/**
 * 视频上传OSS
 * @Params { File } file - 视频文件对象
 * 
*/
function uploadVideoToOSS(file, goodsId) {
  const name = file.name
  let storeAs =  "goodsVideos/"+  goodsId + "-"+ name; // 存储位置
  // 分片上传，可以获取进度
  return ossClient.multipartUpload(storeAs, file, {
      progress:function (p, checkpoint){
        console.log('上传实时进度为', p.toFixed(2)*100)
      }
  })
}

/**
 * 删除文件
*/
function deleteUploadedVideo(goodsId,videoName){
  let storeAs = "goodsVideos/"+ goodsId + "-"+ videoName;
  return ossClient.delete(storeAs)
}

在.html页面中使用： 

<!-- 先下载：aliyun-oss-sdk.min.js到本地, 然后再引入oss-sdk -- >
<script src="aliyun-oss-sdk.min.js"></script>
<script>
   // 初始化OSS实例，通过OSS实例去执行上传、分块上传、删除的方法。
   const OSSOptions = { ... }
   var ossClient = new OSS(OSSOptions);
</script>

二、常见OSS问题Q/A：

1. 访问oss图片链接报错：The specified key does not exist? 

A：当前系统或ip（即访问oss图片链接的）, 没有在oss后台配置可访问的白名单，在后台oss白名单中添加该域名或ip即可。

2. Q：https域名系统下，访问http的oss图片链接，报错：net::ERR_SSL_PROTOCAL_ERROR？

A：https域名下不能访问http的图片，需把上传图片oss的 endpoint 字段的域名，修改为https即可。

3. Q：http系统里面，请求http的oss图片链接报错：Access to XMLHttpRequest at 'http://xxx.png' from origin 'http://xxxx:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource？

报错截图

 A：跨域问题，需在oss后台配置当前系统域名的白名单。

4. Q：新建一个bucket, 上传oss图片后，报错：The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.

A：代码中的endpoint字段的值写错了（或用之前旧的了），需改成新建bucket对应的endpoint取值。参考：阿里云OSS上传文件出错“The bucket you are attempting to access must be addressed using the specified endpoint”_JAVA开发_积微成著

5. Q：访问oss图片链接，报错：The specified bucket does not exist.

A：代码中bucket名称写错了，如：实际是xxx-xxx, 写成xxx_xxx了。

三、OSS图片的常用处理（添加图片水印、转换格式、显示大小、保真度等）

1. 阿里云官网文档：新版图片处理指南

2. 语法为：使用 x-oss-process 参数，赋值格式为（大类：用/斜杠分隔，大类下的多个参数，用逗号分隔）：image/action1,parame_value1/action2,parame_value2/...，具体参照：图片样式

如：http://xxxx?x-oss-process=image/resize,p_63/quality,q_90 表示先将图片缩放到原图的63%，再设置图片相对质量为90%.

// 示例（小狗图片）：
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_100,m_lfit

参考网址：

• JS - 阿里云 OSS 文件下载通用办法（支持跨域）_51CTO博客_js上传阿里云oss