WeChat mini-app to get detailed details of album photos, mini-app album

Detailed description on how the applet obtains photo album photos.

The applet obtains the photo album

Today, I met with the user profile picture setting function of the mini program and took notes.

First upload gif:

Run the following code:

Small demo, the code is very simple.

1. index. wxml

<! -- Index. wxml --> <button style = "margin: 30rpx; "bindtap =" chooseimage "> get image </button> <image src =" {tempFilePaths} "mode =" aspecFill "style =" width: 100%; height: 450rpx "/>

2. index. js

// Index. js // obtain the application instance var app = getApp () Page ({data: {tempFilePaths: ''}, onLoad: function () {}, chooseimage: function () {var _ this = this; wx. chooseImage ({count: 1, // default 9 sizeType: ['original', 'compressed '], // you can specify whether the source image or the compressed image is used. Both have sourceType by default: ['alipay', 'camera '], // you can specify whether the source is an album or a camera. Both have success: function (res) by default) {// return the local file path list of the selected image. The tempFilePath can be used as the src attribute of the img label to display the image _ this. setData ({tempFilePaths: res. tempFilePaths })}})}})

API description:

Note: The image is returned in the local path. If you need to upload the image to the server, you need to use another API.

Sample Code:

Wx. chooseImage ({success: function (res) {var tempFilePaths = res. tempFilePaths wx. uploadFile ({url: 'http: // example.weixin.qq.com/upload', // only for example. The non-real interface address is filePath: tempFilePaths [0], name: 'file', formData: {'user': 'test'}, success: function (res) {var data = res. data // do something }})}})

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!