微信小程序图片上传并展示

微信小程序图片上传并展示

微信小程序是近年来相当流行的一种新型应用程序，与传统的APP相比，小程序更轻量级，门槛更低，用户无需下载安装，即可直接使用。在微信小程序中，图片上传并展示是一种常见的需求，在本文中，我们将介绍如何实现微信小程序的图片上传并展示功能。

使用组件实现图片上传

微信小程序提供了一个上传组件，通过该组件可以方便地实现图片上传功能。以下是一个简单的示例代码：

“`

选择图片

上传图片

选择图片

上传图片

图片预览

“`

在上述代码中，我们使用了一个上传组件，通过点击选择图片按钮可以弹出选择图片对话框，用户选择完毕后，可以通过点击上传图片按钮将图片上传至服务器，并实现图片预览功能。

代码解释如下：

“`

// 选择图片

chooseImage: function(e) {

var that = this

wx.chooseImage({

count: 1, // 最多可以选择的图片张数，默认9

sizeType: [‘compressed’], // original 原图，compressed 压缩图，默认二者都有

sourceType: [‘album’, ‘camera’], // album 从相册选图，camera 使用相机，默认二者都有

success: function(res) {

that.setData({

imageSrc: res.tempFilePaths[0]

})

}

})

},

// 上传图片

uploadImage: function(e) {

var that = this

wx.uploadFile({

url: ‘url’, // 服务器接口地址

filePath: that.data.imageSrc, // 要上传的图片路径

name: ‘image’, // 后台接口规定的字段名

success: function(res) {

console.log(res)

}

})

}

“`

在上述代码中，我们通过`wx.chooseImage`接口来实现选择图片功能，并使用`res.tempFilePaths[0]`获取用户选择的图片路径。然后，通过`wx.uploadFile`接口将图片上传至服务器，服务器接口规定了图片必须使用`image`字段名，因此我们将`name`字段设置为`image`。上传完成后，控制台会打印出相应的返回结果。

使用组件实现图片预览

除了上传图片，我们还需实现图片预览功能，让用户可以在小程序中直接预览上传的图片。以下是一个简单的示例代码：

“`

选择图片

上传图片

选择图片

上传图片

图片预览

“`

在上述代码中，我们将``标签的`bindtap`属性设置为`previewImage`，即用户点击图片时触发`previewImage`函数。以下是该函数的代码实现：

“`

previewImage: function(e) {

wx.previewImage({

urls: [this.data.imageSrc],

current: this.data.imageSrc

})

}

“`

在上述代码中，我们使用`wx.previewImage`接口来实现图片预览功能，并通过`this.data.imageSrc`获取当前预览的图片路径。

总结

本文介绍了如何在微信小程序中实现图片上传和图片预览功能。图片上传通过使用上传组件和上传接口来实现，而图片预览则通过使用`wx.previewImage`接口来实现。在实际开发中，我们可以根据不同需要进行调整，实现更加灵活多样的图片上传和预览效果。