Skip to main content

Image and File

In WeDa, images are categorized into two types based on storage target.

  • Static material images uploaded by developers and stored in Static Hosting. In application materials, these images are writable by administrators and readable by everyone by default.
  • User-uploaded images stored in Cloud Storage. Images and files uploaded via the upload component are readable and writable only by the creator and administrators by default.

User Image Upload​

Material images are ordinary static images and are relatively simple. However, user-uploaded images are not suitable for use as application decoration materials because they are privately readable resources by default. After uploading, a fileId is returned, in the format cloud://xxx/xxxxx.xxx. The actual HTTP access address needs to be retrieved using the fileId. The retrieved HTTP address has a signature and cannot be accessed after the signature's validity period expires. In WeDa, built-in components such as image and rich text automatically convert the fileId into an accessible HTTP address when displaying images.

If you need to obtain a temporary http access address via fileId in page code, you can use the built-in getTempFileURL method.

Image Compression and Processing​

WeDa supports two methods for image compression:

  1. Enable the image compression feature in the Image Upload Component
  2. Enable Tencent Cloud Object Storage's Data Processing image processing capabilities when using images, such as performing basic image loading and cropping to accelerate access performance. Note that this feature is subject to separate Data Processing billing and can be used as needed.

Cloud Infinite Image Processing​

For example, an original image https://lowcode-xxx-xxx.tcloudbaseapp.com/resources/2022-09/lowcode-798848

Scaling via URL: https://lowcode-xxx-xxx.tcloudbaseapp.com/resources/2022-09/lowcode-798848?imageMogr2/thumbnail/!50p will display the effect as shown below, effectively saving CDN traffic and improving image access performance.

The fileId used for user-uploaded images also supports Cloud Infinite parameters, such as:

  • To scale an image by 50%, add the processing parameter ?imageMogr2/thumbnail/!50p: cloud://lowcode-0gv7r6dye9f16540.6c6f-lowcode-0gv7r6dye9f16540-1251326432/weda-uploader/a326043a957a0b7bce78619ad9e6c20c-88bnVxd.jpeg?imageMogr2/thumbnail/!50p
  • To vertically flip an image, add ?imageMogr2/flip/vertical: cloud://lowcode-0gv7r6dye9f16540.6c6f-lowcode-0gv7r6dye9f16540-1251326432/weda-uploader/a326043a957a0b7bce78619ad9e6c20c-88bnVxd.jpeg?imageMogr2/flip/vertical

For specific Cloud Infinite image processing parameters, refer to: https://cloud.tencent.com/document/product/460/6924

File Operations​

WeDa currently only provides uploading, downloading, and reading capabilities for images and files. To invoke complete file operation methods, you need to utilize CloudBase related capabilities.

For example, to delete a recently uploaded file, simply define an event handler function and bind it to the upload success event of the file upload component. The event handler function can be:

index/handler/fileDelete
export default async function ({ event, data }) {
  const app = await $w.cloud.getCloudInstance();
  const result = await app.deleteFile({
    fileList: event.detail.value, // After binding the upload success event, obtain the list of uploaded file IDs via event.detail.value
  });
}