微信小程序实现同步上传图片方法

2021-09-09   阅读:2961   类型:后端   分类:微信小程序    标签: 微信小程序

微信小程序图片上传默认是异步的形式,主要用到wx.uploadFile(Object object),将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求。也就是下面的示例代码

wx.chooseImage({
 success (res) {
  const tempFilePaths = res.tempFilePaths
  wx.uploadFile({
   url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
   filePath: tempFilePaths[0],
   name: 'file',
   formData: {
    'user': 'test'
   },
   success (res){
    const data = res.data
    //do something
   }
  })
 }
})

但是我有时需要把它改成同步的,可以改成如下形式:

1、图片上传方法:

  //图片上传
  uploadimg:function(path){
    return new Promise((resolve, reject) =>{
      wx.uploadFile({
        filePath: path,
        name: 'file',
        url: 'https://www.tpxhm.com/photo',
        success(res) {
        	//resolve作用提示小程序请求已结束
          resolve(JSON.parse(res.data))
        },
        fail (err) {
         reject(err)
        }
      });
    });
  },

2、使用方法:

  async formSubmit(e) {
   var _that2=this
	 let images = _that2.data.pics
	 // console.log(_that2.data.pics)
	 var _images = [];
	 for (let i = 0; i < images.length; i++) {
			var res = await _that2.uploadimg(images[i])
			_images[i] = res.data
	 }
	console.log(_images)
 }

详细示例:

 // index.js
// 获取应用实例
const app = getApp()
Page({
 data: {
  pics: [],//图片
 },
 onLoad() {
 
 
 },
 
  //图片上传
  uploadimg:function(path){
    return new Promise((resolve, reject) =>{
      wx.uploadFile({
        filePath: path,
        name: 'file',
        url: 'https://www.tpxhm.com/photo',
        success(res) {
        	//resolve作用提示小程序请求已结束
          resolve(JSON.parse(res.data))
        },
        fail (err) {
         reject(err)
        }
      });
    });
  },
  async formSubmit(e) {
   var _that2=this
	 let images = _that2.data.pics
	 // console.log(_that2.data.pics)
	 var _images = [];
	 for (let i = 0; i < images.length; i++) {
			var res = await _that2.uploadimg(images[i])
			_images[i] = res.data
	 }
	console.log(_images)
 }
})
【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/815.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×