微信小程序 图片上传实例详解

微信小程序图片上传实例详解指南

===========================

一、深入了解wx.chooseImage()功能

-

微信小程序的wx.chooseImage()函数是图片上传的重要基础。它允许用户从相册选择或相机拍摄图片，为开发者提供了一个便捷的图片获取方式。

二、详细编程步骤

--

在pages文件夹内创建一个名为uploadimg的文件夹。接下来，我们按照步骤进行编程。

1. 编写页面结构：uploadimg.wxml

页面结构非常简洁，包含一个按钮用于选择图片，以及一个用于显示所选图片的image标签。

```html

获取图片

```

2. 设置数据：uploadimg.js

首先获取应用实例，然后在Page中设置数据。重点在于chooseimage函数，它负责调用wx.chooseImage()来选择图片。

```javascript

// 获取应用实例

var app = getApp();

Page({

data: {

tempFilePaths: '', // 用于存储所选图片的本地文件路径

},

// 上传图片

chooseimage: function () {

var _this = this;

wx.chooseImage({

count: 1, // 默认9，可根据需求设置

sizeType: ['original', 'pressed'], // 可以指定是原图还是压缩图

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机

success: function (res) { // 注意这里是success，不是suess

_this.setData({

tempFilePaths: res.tempFilePaths // 更新数据，以便在image标签中显示图片

})

}

})

}

});

```

-

以上就是微信小程序图片上传的实例详解。通过简单的编程，我们可以方便地实现图片上传功能，为用户提供更好的交互体验。希望这篇文章能帮助到大家，感谢阅读，谢谢对咱们的支持！若有任何疑问，欢迎随时交流。