微信小程序-图片上传

实现这个功能的方法有很多种。其中一种较为简单的方法如下：

1. 在wxml文件中，先定义一个用来展示图片的“`“`标签，给它设置一个id，比如“`picBox“`，并绑定一个“`tap“`事件：

“`



“`

2. 在js文件中，编写“`chooseImage“`函数。这个函数的作用是弹出一个选择图片的界面，让用户选择相册中的图片，并将所选图片展示在“`picBox“`中。此外，还需给每张图片都添加一个“`“`标签，方便后面进行删除操作。函数代码如下：

“`javascript
chooseImage: function() {
var that = this;
wx.chooseImage({
count: 9, // 最多可以选择9张图片
success: function(res) {
var tempFilePaths = res.tempFilePaths; // 图片本地文件路径列表
for (var i = 0; i < tempFilePaths.length; i++) { var imgBox = that.createImage(tempFilePaths[i]); // 创建一个包含图片的image标签，并返回这个标签 that.appendImage(imgBox); // 往picBox中添加这个image标签 } } })},// 创建image标签createImage: function(tempFilePath) { var imgBox = document.createElement("image"); imgBox.classList.add("img-box"); // 为了方便后面删除操作的实现，需要给每个image标签都添加一个类名 imgBox.src = tempFilePath; return imgBox;},// 添加image标签appendImage: function(imgBox) { var picBox = document.getElementById("picBox"); picBox.appendChild(imgBox);}```3. 实现图片的删除功能。具体实现方法如下：给```picBox```绑定一个```longpress```事件，作为触发删除操作的入口。当用户长按某张图片时，会触发```showActionSheet```函数，弹出一个菜单，让用户选择是否删除这张图片。当用户点击菜单中的删除按钮时，会执行```deleteImage```函数，将这张图片从界面中删除。代码如下：```javascript// 长按图片弹出操作菜单longTap: function(e) { var that = this; var target = e.target; if (target.tagName === "IMAGE") { wx.showActionSheet({ itemList: ["删除"], success: function(res) { if (res.tapIndex === 0) { that.deleteImage(target); } }, fail: function(res) { console.log(res.errMsg); }, complete: function(res) {} }) }},// 删除图片deleteImage: function(imgBox) { var picBox = document.getElementById("picBox"); picBox.removeChild(imgBox);}```至此，这个多图上传的功能就完成了。需注意的是，此处的代码中使用的是dom操作（```document.createElement```等），实际开发中应该使用小程序自带的wxml标签和事件处理函数（```“`、“`bind_longpress“`等），使得代码更符合小程序的开发规范。