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

最新推荐文章于 2024-05-09 16:34:31 发布

「已注销」

最新推荐文章于 2024-05-09 16:34:31 发布

阅读量1.2k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/clear_code/article/details/106627693

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序多张图片上传；主要运用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: imag

最低0.47元/天解锁文章