跳到主要内容

图片及文件

微搭中图片按存储目标分两种：

  • 存储在静态托管中的开发者上传的静态素材图片，应用素材中的图片默认是管理员可写，所有人可读。
  • 存储在云存储中的用户上传图片，用户通过上传组件上传的图片和文件默认是仅创建者和管理员可读写。

用户上传图片​

素材图片为普通的静态图片，比较简单。但用户上传图片并不适合用来做应用装饰素材，因为其默认为私有读的资源，上传完会返回一个 fileId，格式cloud://xxx/xxxxx.xxx，真正的 http 访问地址需要通过 fileId 来换取，换取回来的 http 地址带有签名并且签名有效期过后就不能访问。微搭中自带的图片及富文本等组件在展示图片的时候会自动将 fileId 转成可访问的 http 地址。

如果在页面代码中通过 fileId 获取临时 http 访问地址可以通过内置的 getTempFileURL 方法来获取。

图片压缩及处理​

微搭中支持两种方式对图片进行压缩：

  1. 在图片上传组件中启用图片压缩功能
  2. 使用图片时启用腾讯云对象存储数据万象的图片处理能力，比如进行基本的图片加载和裁剪以加速访问性能。需要注意的是该功能为数据万象独立计费功能，可酌情使用。

万象图片处理​

比如一个原始图片 https://lowcode-xxx-xxx.tcloudbaseapp.com/resources/2022-09/lowcode-798848

通过 URL 缩放：https://lowcode-xxx-xxx.tcloudbaseapp.com/resources/2022-09/lowcode-798848?imageMogr2/thumbnail/!50p 即可看到下图效果，会有效的节省 CDN 流量，及图片访问性能。

对于用户上传的图片使用的 fileId 同样也支持万象参数，如：

  • 我们想把一张图片缩放 50%，可以加上处理参数 ?imageMogr2/thumbnail/!50p：cloud://lowcode-0gv7r6dye9f16540.6c6f-lowcode-0gv7r6dye9f16540-1251326432/weda-uploader/a326043a957a0b7bce78619ad9e6c20c-88bnVxd.jpeg?imageMogr2/thumbnail/!50p
  • 想垂直翻转图片的时候加上 ?imageMogr2/flip/vertical：cloud://lowcode-0gv7r6dye9f16540.6c6f-lowcode-0gv7r6dye9f16540-1251326432/weda-uploader/a326043a957a0b7bce78619ad9e6c20c-88bnVxd.jpeg?imageMogr2/flip/vertical

具体万象图片处理参数可参考：https://cloud.tencent.com/document/product/460/6924

文件操作​

微搭中当前仅提供了对图片和文件的上传和下载读取，如果需要调用完成的文件操作方法需要调用云开发相关能力完成。

比如想删除刚上传的一个文件，则只需定一个事件处理函数，并绑定在文件上传组件的上传成功事件。事件处理函数可以为：

index/handler/fileDelete
export default async function ({ event, data }) {
  const app = await $w.cloud.getCloudInstance();
  const result = await app.deleteFile({
    fileList: event.detail.value, // 绑定上传成功事件后通过 event.detail.value 获取上传的文件 fileid 列表
  });
}