前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序多图上传服务器接收返回数据操作

小程序多图上传服务器接收返回数据操作

作者头像
砸漏
发布2020-10-16 15:59:13
1.2K0
发布2020-10-16 15:59:13
举报
文章被收录于专栏:恩蓝脚本

之前有写过小程序上传图片的,大多数都是前端处理,这篇是关于上传到服务器接收返回数据操作的,这里使用迭代器防止数据返回异步。

js:

代码语言:javascript
复制
/**
  * 上传图片
  */
 upImg: function (e) {
     let that = this
     wx.chooseImage({
         success: function (res) {
             // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
             let tempFilePaths = res.tempFilePaths
             // console.log(tempFilePaths)
             let imgs = that.data.imgs  // 这个是储存图片地址,用于显示图片
             let image = that.data.image  // 这个是获取图片名称或者id等后端发送请求需要的数据
             that.uploadImage(0, tempFilePaths)
         }
     })
 },
 /**
  * 图片上传接口
  */
 uploadImage: function (i,filePath){
     if (i == filePath.length){
         return
     }
     let that = this
     let imgs = that.data.imgs
     let image = that.data.image
     wx.uploadFile({
         url: app.globalData.api + '/Uploads/uploader', //仅为示例,非真实的接口地址
         filePath: filePath[i],
         name: 'file',
         success: function (res) {
             let img = JSON.parse(res.data)
             console.log(img)
             if (img.code == 200) {
                 imgs.push(img.data.url_file_name)
                 image.push(img.data.file_name)
                 that.setData({
                     imgs,
                     image
                 })
                 console.log(that.data.imgs)
                 console.log(that.data.image)
                 i++
                 that.uploadImage(i, filePath)
             }
             //do something
         }
     })
 },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • js:
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档