小程序多张图片上传、删除、预览

最新推荐文章于 2024-03-24 13:58:25 发布

原创

最新推荐文章于 2024-03-24 13:58:25 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中实现多张图片的选择、上传、删除和预览功能。利用Promise.all确保图片上传完成后进行下一步操作，如发布文章。在data中存储图片信息，并通过小程序的chooseImage接口获取图片，wxss和wxml用于展示。

小程序多张图片上传；主要运用promise的all，代码如下:
本文中的basicURL 是我在app.js中配置的全局变量，即请求接口的域名地址；

data中的数据：

imageList:[],

1、选择图片

微信小程序自带chooseImage方法。选择图片，把图片路径保存到imageList数组中；

chooseImage: function () {
    var _this = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
        console.log(res);
        var tempFilePaths = res.tempFilePaths;
        var imageList = _this.data.imageList;
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imageList.length >= 9) {
            _this.setData({
              imageList: imageList
            });
            return false;
          } else {
            imageList.push(tempFilePaths[i]);
          }