1. 引言
随着移动互联网的发展，小程序已经成为一个重要的应用形式。小程序可以方便地在各个平台上进行开发和发布，同时也有着较好的用户体验。在小程序中，图片上传和预览是常见的功能需求，本文将介绍如何在小程序中实现多图上传和图片预览效果。
2. 多图上传实现
2.1. 上传图片
在小程序中，可以使用微信官方提供的wx.chooseImage API来实现选择图片的功能。该API可以让用户从相册中选择图片，或者使用相机进行拍照。选择好图片后，可以将图片上传到服务器。
以下是一个示例代码，可以选择并上传一张图片：
wx.chooseImage({
count: 1, // 选择图片的数量
sizeType: ['compressed'], // 所选的图片的尺寸压缩方式
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
success: function (res) {
var tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
// 上传图片到服务器
wx.uploadFile({
url: '服务器url',
filePath: tempFilePaths[0],
name: 'image',
header: {
'content-type': 'multipart/form-data'
},
formData: {
// 其他字段
},
success: function (res) {
console.log(res);
// 上传成功，返回的res.data中包含服务器返回的图片URL，可以将其保存到本地或者显示在页面上
},
fail: function () {
console.log('上传失败');
}
});
}
});
在实际开发中，需要根据业务需求设置图片的数量、尺寸、来源等参数。同时，也需要根据服务器的要求设置上传图片的参数和请求头。上传成功后，可以将服务器返回的图片URL保存到本地或显示在页面上。
2.2. 多图上传
在实际开发中，往往需要上传多张图片。可以使用类似上面的方法，多次选择和上传图片。但是这种方式效率较低，不够优雅。
幸好，小程序提供了wx.chooseMessageFile API，可以同时选择多个文件并上传。以下是一个示例代码：
wx.chooseMessageFile({
count: 9, // 选择图片的数量
type: 'image', // 只能选择图片文件
success: function (res) {
console.log(res);
var tempFiles = res.tempFiles; // 返回选定文件的本地文件路径列表，tempFiles可以用来上传文件
// 上传图片到服务器
for (var i = 0; i < tempFiles.length; i++) {
wx.uploadFile({
url: '服务器url',
filePath: tempFiles[i].path,
name: 'image',
header: {
'content-type': 'multipart/form-data'
},
formData: {
// 其他字段
},
success: function (res) {
console.log(res);
// 上传成功，返回的res.data中包含服务器返回的图片URL，可以将其保存到本地或者显示在页面上
},
fail: function () {
console.log('上传失败');
}
});
}
}
});
选择多张图片后，可以将所有图片的本地路径保存到tempFiles数组中，然后遍历数组，将每个文件上传到服务器。上传成功后，同样可以将服务器返回的图片URL保存到本地或显示在页面上。
3. 图片预览实现
在小程序中，图片预览同样是常见的功能需求。可以使用微信官方提供的wx.previewImage API来实现图片预览。
3.1. 预览单张图片
以下是一个示例代码，可以预览一张图片：
wx.previewImage({
urls: ['图片url'],
current: 0, // 当前显示图片的索引
success: function(res) {
console.log('预览成功');
},
fail: function() {
console.log('预览失败');
}
});
该API需要传入一个数组urls，包含所有需要预览的图片url。同时，可以指定当前显示的图片索引current，以及预览成功和失败的回调函数。
3.2. 预览多张图片
在实际开发中，往往需要预览多张图片。可以使用类似上面的方法，多次调用wx.previewImage API。但是这种方式效率较低，不够优雅。
幸好，小程序提供了wx.previewMedia API，可以同时预览多个媒体文件，包括图片、视频等。以下是一个示例代码，可以预览多张图片：
wx.previewMedia({
sources: [
{
url: '图片url1',
type: 'image'
},
{
url: '图片url2',
type: 'image'
},
{
url: '图片url3',
type: 'image'
}
],
current: 0, // 当前显示图片的索引
success: function(res) {
console.log('预览成功');
},
fail: function() {
console.log('预览失败');
}
});
该API需要传入一个数组sources，包含所有需要预览的媒体文件，每个文件包含url和type两个属性。同时，可以指定当前显示的图片索引current，以及预览成功和失败的回调函数。
4. 结论
本文介绍了在小程序中实现多图上传和图片预览的方法。对于图片上传，可以使用wx.chooseImage API来选择和上传单张图片，或者使用wx.chooseMessageFile API来选择和上传多张图片。对于图片预览，可以使用wx.previewImage API来预览单张图片，或者使用wx.previewMedia API来预览多张图片。
以上仅为示例代码，具体实现要根据业务需求进行调整。希望本文对开发小程序的读者有所帮助。