微信小程序获取相册照片的方法与步骤详解

why 747 2024-08-16

这篇文章主要介绍了微信小程序 获取相册照片实例详解的相关资料,需要的朋友可以参考下

微信小程序 获取相册照片

今天遇到微信小程序的用户头像设置功能,做笔记.

先上gif:

再上代码:

小demo,代码很简单.

1.index.wxml


1

2

3

<!--index.wxml-->

<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>

<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>


2.index.js


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//index.js

//获取应用实例

var app = getApp()

Page({

 data: {

  tempFilePaths: &#39;&#39;

 },

 onLoad: function () {

 },

 chooseimage: function () {

  var _this = this;

  wx.chooseImage({

   count: 1, // 默认9

   sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图,默认二者都有

   sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机,默认二者都有

   success: function (res) {

    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

    _this.setData({

     tempFilePaths:res.tempFilePaths

    })

   }

  })

 }

})


API 说明:

image.png

这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个API.

示例代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

wx.chooseImage({

 success: function(res) {

  var tempFilePaths = res.tempFilePaths

  wx.uploadFile({

   url: &#39;http://example.weixin.qq.com/upload&#39;, //仅为示例,非真实的接口地址

   filePath: tempFilePaths[0],

   name: &#39;file&#39;,

   formData:{

    &#39;user&#39;: &#39;test&#39;

   },

   success: function(res){

    var data = res.data

    //do something

   }

  })

 }

})


以上就是本文的全部内容,希望对大家的学习有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中实现顶部选项卡(swiper)的详细介绍
下一篇:微信小程序商城项目里商品属性分类的具体实现
相关文章

 发表评论

暂时没有评论,来抢沙发吧~