评论

多张图片上传(源码分享+实现分析)

多种方法实现多张图片上传

本篇文章以小程序中的代表【微信小程序】为例,分享一下在微信小程序中实现多图上传的源码实现。

代码片段(可导入微信WEB开发者工具体验)https://developers.weixin.qq.com/s/DHrt69mk7af3

两种不同实现方法的优缺点,请查看我的 博客原创文章,在文章中有详细的说明

小程序 多张图片上传 文章地址:https://blog.csdn.net/u013350495/article/details/104326088

源码:

const app = getApp()
 
Page({
  data: {
    // 已选择上传的本地图片地址
    urlArr:['helang.jpg','1846492969.jpg','web.jpg']
  },
  onLoad: function () {
    
  },
  // 多图上传-回调式
  uploadCallback(){
    let index = 0// 当前位置,标识已上传到第几张图片
    let newUrls = []; // 上传成功后的图片地址数组
    // 图片上传方法
    let upload = ()=>{
      let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
      wx.showLoading({
        title: '正在上传',
      });
      /* 
        无图片上传接口,收setTimeout 模拟延迟状态
        项目中替换为 wx.uploadFile 即可
      */
      // 假设每 1000ms 上传一张图片
      setTimeout(()=>{
        // 此处为已上传成功后的回调函数内容
        let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
        newUrls.push(resUrl); // 将上传后的地址添加到成功数组中
 
        // 判断图片是否已经全部上传完成
        if (index >= (this.data.urlArr.length-1)){
          send();
        }else{
           //未全部上传完时标识位置+1并再次调用上传方法
          index++; 
          upload();
        }
      },1000);
    }
    // 发送方法,用作图片上传完后,得到图片地址提交给其它接口或其它操作
    let send = () => {
      // 关闭加载提示
      wx.hideLoading();
      wx.showToast({
        title: '上传成功',
        icon:'success'
      })
 
      // 输出已经上传完的图片地址,请查看控制台结果
      console.log(newUrls);
    }
 
    // 调用上传方法
    upload();
  },
  // 多图上传-Promise
  uploadPromise(){
    /* Promise 对象数组 */
    let p_arr = [];
 
    /* 新建 Promise 方法,nowUrl参数为当前上传的图片地址 */
    let new_p = (nowUrl) => {
      return new Promise((resolve, reject) => {
        /* 
        无图片上传接口,收setTimeout 模拟延迟状态
        项目中替换为 wx.uploadFile 即可
        */
        // 假设每 1000ms 上传一张图片
        setTimeout(()=>{
          // 此处为已上传成功后的回调函数内容
          let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
          resolve(resUrl);
        },1000);
      })
    }
    
    // 遍历数据,创建相应的 Promise 数组数据
    this.data.urlArr.forEach((item, index) => {
      let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
      p_arr.push(new_p(nowUrl));
    });
    
    wx.showLoading({
      title: '正在上传',
    });
    /* 所有图片上传完成后调用该方法 */
    Promise.all(p_arr).then((res) => {
      // 关闭加载提示
      wx.hideLoading();
      wx.showToast({
        title: '上传成功',
        icon: 'success'
      })
      // 输出已经上传完的图片地址,请查看控制台结果
      console.log(res);
    });
  }
})
最后一次编辑于  1天前  
点赞 3
收藏
评论

1 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    1天前

    收藏,mark。

    感谢分享。

    1天前
    赞同 1
    回复 4
    • 梦之蓝
      梦之蓝
      1天前
      感谢支持!
      1天前
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      1天前回复梦之蓝
      文章思路清晰。还有比较详细的解释,不过要跳到csdn看全文
      1天前
      回复
    • 梦之蓝
      梦之蓝
      1天前回复Admin²⁰²⁰
      哈哈~~~~不想再复制了嘛!
      1天前
      回复
    • 梦之蓝
      梦之蓝
      1天前
      爱学习的人才,毕竟大部分只是想复制代码而已
      1天前
      回复
登录 后发表内容