WeChat develops the functions of camera taking pictures and uploading pictures locally

This article mainly introduces the relevant information on the development of WeChat applet to obtain pictures from the photo album-using the camera to take pictures and upload local pictures. Has very good reference value. Let’s take a look with the editor below

Today I encountered the user avatar setting function of the WeChat applet and took notes.

First upload the gif:

More code:

Small demo, the code is very simple.

1.index.wxml

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

2 .index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  tempFilePaths: '' 
 }, 
 onLoad: function () { 
 }, 
 chooseimage: function () { 
  var _this = this; 
  wx.chooseImage({ 
   count: 1, // 默认9 
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
   success: function (res) { 
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
    _this.setData({ 
     tempFilePaths:res.tempFilePaths 
    }) 
   } 
  }) 
 } 
})

API description:

Here we talk about sourcetype. The default is to obtain and use it from the album The camera takes pictures, which is the same as WeChat's current picture selection interface. The first frame is for taking pictures, and the following is for album photos.

Note here: What is returned is the local path of the picture. If you need to upload the picture to the server, 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', //仅为示例，非真实的接口地址 
   filePath: tempFilePaths[0], 
   name: 'file', 
   formData:{ 
    'user': 'test' 
   }, 
   success: function(res){ 
    var data = res.data 
    //do something 
   } 
  }) 
 } 
})

The above is the detailed content of WeChat develops the functions of camera taking pictures and uploading pictures locally. For more information, please follow other related articles on the PHP Chinese website!