云存储基础

2022-04-13 19:54:21 浏览数 (1)

云存储基础

使用uniCloud的云存储，无需再像传统模式那样单独去购买存储空间、CDN映射、流量采购等；

文件上传至云存储有3种方式：

  1. uniCloud Web控制台：点击云存储，通过web界面进行文件上传。该管理界面同时提供了资源浏览、删除等操作界面。
  2. 客户端上传：在前端js中调用uniCloud.uploadFile。
  3. 云函数上传：在云函数js中调用uniCloud.uploadFile。

注意事项：

  • 前端和云函数端，均有一个相同名称的api：uniCloud.uploadFile。请不要混淆。
  • 前端还有一个uni.uploadFile的API，那个API用于连接非uniCloud的上传使用。请不要混淆。
  • 由于安全原因暂时禁止云存储内上传html文件。

在uniCloud由阿里云提供的云空间里，云存储总文件量上限为10GB，单文件大小限制为100MB，自带CDN并且完全免费。这些免费资源可用于正常公司业务，阿里云不允许开发者使用这些免费的存储及CDN资源来开展图床类业务。

客户端上传

在客户端使用uniCloud.uploadFile前，应该将以下域名配置到upload白名单。

bsppub.oss-cn-shanghai.aliyuncs.com

前端调用云存储API上传文件

代码语言：javascript复制
uniCloud.uploadFile({
  cloudPath:"上传后云端显示的文件名",//可以重名，不支持子目录
  filePath:"本地需要上传的文件路径",
  success:(res)=>{//上传成功后的回调
    //res.fileID为文件上传成后的云端访问地址，可直接使用
  },
  fail:()=>{},//上传失败的回调
  onUploadProgress:()=>{//上传进度回调
    
  }
})

以下代码为从手机相册选取一张图片上传至云存储

代码语言：javascript复制
//前端代码
uni.chooseImage({
  count: 1,
  success(res) {
    console.log(res);
    if (res.tempFilePaths.length > 0) {
      let filePath = res.tempFilePaths[0]
      //进行上传操作

      // promise方式
      const result = await uniCloud.uploadFile({
        filePath: filePath,
        cloudPath: 'a.jpg',
        onUploadProgress: function(progressEvent) {
                console.log(progressEvent);
                var percentCompleted = Math.round(
                  (progressEvent.loaded * 100) / progressEvent.total
                );
              }
      });

      // callback方式，与promise方式二选一即可
      uniCloud.uploadFile({
        filePath: filePath,
        cloudPath: 'a.jpg',
        onUploadProgress: function(progressEvent) {
          console.log(progressEvent);
          var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        },
        success() {},
        fail() {},
        complete() {}
      });
    }
  }
});

在前端，我们仅能上传文件至云存储，不能删除云存储中的文件。要删除云存储中的文件要么在uniCloud Web控制台，要么在云函数中操作。

在云函数操作云存储

上传

代码语言：javascript复制
const res = await uniCloud.uploadFile({
  cloudPath:"上传后云端显示的文件名",
  fileContent:"文件的绝对路径或文件的buffer"
})

console.log(res.fileID);//文件上传后的云端访问地址

下面的代码演示了如何把图片从一个URL读取出来并上传到自己的云存储中

代码语言：javascript复制
const image = await uniCloud.httpclient.request("图片的url");
    
const res = await uniCloud.uploadFile({
  cloudPath:"上传后云端显示的文件名",
  fileContent:image.data//文件的buffer
});

注意：如果是从客户端上传文件，不建议读取文件再通过传参传给云函数，再由云函数上传到云存储，应该在客户端直传云存储。

删除

代码语言：javascript复制
const res = await uniCloud.deleteFile({
    fileList: [
        "fileID"//文件在云存储中的访问地址
    ]
});

云存储常用文件处理

在访问云存储中的图片或视频文件时，我们可以通过追加一些参数来即时处理文件。注意，处理是实时生效的，这并不会对你云存储中的文件产生任何改变。

图片缩放resize

可以通过图片缩放参数，调整图片大小，常常用来做各种不同尺寸的缩略图。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/resize,其他参数

参数说明：

注意事项：

  • 原图限制
    • 图片格式只能是：JPG、PNG、BMP、GIF、WebP、TIFF。其中GIF格式的图片支持指定宽高缩放，不支持等比缩放（等比缩放情况下，动态图会变成静态图）。
    • 原图大小不能超过20 MB。
    • 宽或高不能超过30,000 px，且总像素不能超过2.5亿 px。动态图片（例如GIF图片）的像素计算方式为宽*高*图片帧数；非动态图片（例如PNG图片）的像素计算方式为宽*高。
  • 缩放图限制 宽或高不能超过16,384 px，且总像素不能超过16,777,216 px。
  • 缩放优先级 如果图片处理URL中同时指定按宽高缩放和等比缩放参数，则只执行指定宽高缩放。
  • 缩放时只指定宽度或者高度
    • 等比缩放时，会按比例缩放图片。例如原图为200 px*100 px，将高缩放为100 px，则宽缩放为50 px。
    • 固定宽高缩放时，会将原图宽高按照指定值进行缩放。例如原图为200 px*100 px，将高缩放为100 px，则宽也缩放为100 px。
  • 如果缩放模式为mfit，且为目标缩放图的最长边l或者目标缩放图的最短边s指定了值，则l和s都会应用指定的值进行缩放。
  • 如果指定了缩放模式m，且为目标缩放图的宽度w或目标缩放图的高度h指定了值，则目标缩放图的最长边l或目标缩放图的最短边s的取值不会生效。
  • 目标缩放图比原图尺寸大时，默认返回原图。您可以增加limit_0参数放大图片。例如，https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_500,limit_0

图片裁剪crop

可以通过图片裁剪参数，在原图上裁剪指定大小的矩形图片。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/crop,其他参数

参数说明：

注意事项：

在使用自定义裁剪功能时，请注意以下事项：

  • 如果指定起点的横纵坐标大于原图，将会返回BadRequest错误，错误信息为：Advance cut's position is out of image。
  • 如果从起点开始指定的宽度和高度超过了原图，将会直接裁剪到原图边界为止。

图片加水印

可以通过图片水印参数，为云存储中的图片文件增加水印文字或水印图。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/watermark,其他参数

参数说明：

  • 基础参数
  • 图片水印参数
  • 文字水印参数
  • 图文混合水印参数

水印编码：

在添加水印操作中，文字水印的文字内容、文字颜色、文字字体、图片水印的水印图片名称等参数需要进行URL安全的Base64编码。编码步骤如下：

  1. 将内容编码成Base64。
  2. 将结果中的部分编码替换。
    • 将结果中的加号（ ）替换成短划线（-）。
    • 将结果中的正斜线（/）替换成下划线（_）。
    • 将结果中尾部的等号（=）省略。

注意事项：

  • 图片水印只能使用当前存储空间内的图片，网络或本地图片需上传至当前存储空间内方可使用。
  • 图片水印目前仅支持JPG、PNG、BMP、WebP、TIFF格式。
  • 单张图片最多支持添加3张不同的图片水印，且各个图片水印的位置不能完全重叠。
  • 文字水印暂不支持繁体中文。

图片格式转换

可以通过格式转换参数，转换云存储中图片文件的格式。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/format,其他参数

参数说明：

注意事项：

  • 图片处理包含缩放操作时，建议将格式转换参数放到处理参数的最后。例如image/resize,w_100/format,jpg
  • 图片处理包含缩放和水印操作时，建议将格式转换参数添加在缩放参数之后。例如image/reisze,w_100/format,jpg/watermark,...

图片质量改变

可以通过图片质量改变参数，在取出云存储中的图片文件是调节图片质量。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/quality,其他参数

参数说明：

注意事项：

质量变换仅支持JPG和WebP，其他图片格式不支持。

视频截取图片

可以通过视频截帧参数，取出云存储中视频文件指定帧的图片。

使用方法：

代码语言：javascript复制
//fileID 示例 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ef89fa94-5d19-4f01-b2b8-edc1f4387edc/b98b33ba-1595-4fda-995a-6c4e17a9e2c5.png
fileID?x-oss-process=image/snapshot,其他参数

参数说明：

注意事项：

  • 仅支持对视频编码格式为H264和H265的视频文件进行视频截帧。
  • 视频截帧的图片是实时的，如需保存，需通自行上传至云存储
云函数 serverless 网站 图片处理

0 人点赞