When we use low-code tools to develop small programs, we always have the need to upload and download images. For beginners, it is often confusing to upload and download pictures. In this article, we will introduce how to upload and download pictures in Weibo.

1 Define the data source

We usually use the form container component when uploading images. The form container can automatically generate interactive pages according to the fields of the data source. In order to be able to automatically generate pages, we first need to define the data source.

Log in to the console, click Data Source, click New Data Model
insert image description here
, enter the name of the data source,

click the Edit button, add a field,

select the field type as image, and support uploading images in jpg and png formats, and the allowed size is 10MB

2 Create a custom application

In order to develop a small program, we need to create an application after the data source is established. We select the custom application and
insert image description here
enter the name of the application. Select the supported platform as the small program and

click on the blank page to complete the application creation.

3 Create pages

We have created the homepage by default. In addition to the homepage, we also need a form page for uploading pictures. Click the +number next to the page to complete the creation of the page.
insert image description here

4 Construction of the image upload page

We created the data source at the beginning. On the image upload page, we can use the form container to complete the automatic generation of the page. Drag the form container component to the page.
insert image description here
In the property panel on the right, we select the data model to automatically generate the page

5 Construction of the homepage

After we have the upload page, we need to build a home page to display the uploaded pictures, and add a data list component to the page
insert image description here
Template selection card list, select the data model

Bind the address of the picture to the field of the data source

6 Create APIs

The logic of our picture download is to exchange the temporary link of the picture according to the fileID stored in the data source, so we need to create an api. Click APIs in the console, click New APIs and
insert image description here
select Custom

Enter the name and ID

Click Create Now

Enter the name and ID, select Query Single for the method intent, and select Custom Code for the

type Enter the following code

/**
* 使用 npm 包 node-fetch 发送http请求, 详细使用文档可以参考
*  https://github.com/node-fetch/node-fetch
*/
const cloud = require('wx-server-sdk')
cloud.init({
    
    
  env: cloud.DYNAMIC_CURRENT_ENV
})

module.exports = async function (params, context) {
    
    
  // 这里是方法入参
  const fileList = [params.filedid]
  const result = await cloud.getTempFileURL({
    
    
    fileList: fileList,
  })
  return result.fileList
};

Add an
insert image description here
input parameter After the input parameter is established, click the method test, enter the fieldid, and click the output parameter mapping after seeing success

7 Realize image download

If the picture is downloaded, we first need to add a click event to the picture
insert image description here
Select the custom method, enter the method name and

enter the following code

export default async function({
     
     event, data}) {
    
    
  console.log(data.target)
  const result = await app.cloud.callConnector({
    
    
        name: 'getTempFile_6dxjij6',
        methodName: 'getTempFile',
        params: {
    
    
          filedid:data.target
        }, // 方法入参
    });
    console.log(result[0].tempFileURL)
    wx.getImageInfo({
    
    
        src: result[0].tempFileURL,
        success: function (res) {
    
    
            console.log("wx.downloadFile");
            console.log(res);
            wx.saveImageToPhotosAlbum({
    
    
                // res.path 为临时文件存储的位置
                filePath: res.path,
                success(res) {
    
    
                    wx.showToast({
    
    
                        title: '保存成功',
                        icon: "success",
                        duration: 1000
                    })
                }
            })
        }
    })
}

When calling the custom method, we need to pass in the filedid of the picture, click the data binding button of the incoming parameter, and select from the data field
insert image description here

Summarize

This article introduces the method of image upload and download. Image upload needs to establish a data source first, and then use the form container component to realize it. Image download requires us to create an api to obtain the Internet address of the image, and then call the WeChat api to realize the download. Students who don’t yet know how to implement it according to the tutorial.

[Micro Build Low Code] Small program to upload and download pictures

Table of contents