微信小程序上传多图到服务器并获取返回的路径

向右看齐 2022-06-08 12:22 195阅读 0赞

微信小程序上传图片很简单：

//点击选择图片
      chooseimage:function(){
        var that = this;
        wx.chooseImage({
           count: 9, // 默认9 
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
          success: function(res) {
            that.setData({
              tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接
            })
          }
        })
      },

这里的setData里面是当你选择照片之后，再一次出发函数时候，会在原有的基础上增加照片，而不是覆盖掉，有兴趣可以看一下concat的含义

这里就选择了照片，可以显示在界面上

效果图：

![Center][]

然后是多图上传的过程，这里我上传到公司oss里面，源码：

upload:function(){
        for (var i = 0; i < this.data.tempFilePaths.length; i++) {
          // console.log("000")
          this.upload_file(this.data.tempFilePaths[i])
        }
      },
      upload_file: function (filepath) {
        var that = this;
      wx.uploadFile({
        url: 'https://***********************/imgs',
        header: {
          'content-type': 'multipart/form-data'
        },
        filePath: filepath,
        name: 'file',
        formData: {
          file: filepath
        },
      success:function(res){
        that.setData({
          mes:JSON.parse(res.data),
          images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象
        })
        // console.log(that.data.mes.data.filePath)
        // console.log(that.data.images.length + "**********")
        // wx.showToast({
        //   title: 'success',
        // })
      },
      fail: function (res) {
        wx.showToast({
          title: '图片加载失败',
        })
      }
      })
      }

其实到这里都没有太大的问题。

但是当我点击提交的时候，就会出现图片为空的问题，这是因为，我们在提交的事件中肯定是先写上传图片的方法，

让后是提交的方法，但是由于微信小程序是异步，在for循环没有执行完就触发了提交的事件，这造成图片为空的问题。

我搜了很多答案出来，但是由于是接触不久，完全没看懂，什么Promis之类的，只能自己想办法，就在选择图片的时候就把图片上传了，然后返回路径：

upload:function(){
        for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
          // console.log("000")
          this.upload_file(this.data.tempFilePaths[i])
        }
      },

你会发现我加了一个temp,这样就会解决问题，可以实现上传，但是删除的时候需要把上传的也删除掉，而不是单单的吧集合里面的删除掉。

源码：

// pages/comment/cmment.js
    const app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        mes:{},
        content:'',
        tempFilePaths:[],
         userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        images:[],
        temp:0,
        infoId:'',
        sendtype:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options.infoId+"infoID")
        this.setData({
          infoId: options.infoId,
          sendtype: options.sendtype
        }) 
    
      },
      /**
       * 页面上拉触底事件的处理函数
       */ 
      onReachBottom: function () {
      
      },
      confirmSubmit:function(e){
        
        console.log(e.detail.value)
      },
    
      //点击选择图片
      chooseimage:function(){
        var that = this;
        wx.chooseImage({
           count: 9, // 默认9 
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
          success: function(res) {
            that.setData({
              tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接
            })
            that.upload();
            that.setData({
              temp: that.data.tempFilePaths.length//用来解决 for 循环比 异步 快
            })
          }
        })
      },
      //点击删除图片
      delete: function (e){
        var index = e.currentTarget.dataset.id;
        this.data.tempFilePaths.splice(index,1)
        //渲染数据
        this.setData({
          tempFilePaths: this.data.tempFilePaths
        })
      },
      //提交评论
      formBindsubmit: function (e) {
        // console.log(this.data.images.length + "*****");
        // for (var i = 0; i < this.data.images.length; i++){
        //   console.log(this.data.images[i]);
        // }
        console.log(this.data.infoId + "infoID不能用？")
        wx.request({
          url: 'https://*******/saveComments',
          method: 'POST',
          header: {
            'content-type': 'application/json',
            'user-token': 'OXJ*****',//usertoken
          },
          data: {
            relevantId: this.data.infoId,
            type: 1,//this.data.type,
            content:e.detail.value.content,
            images:this.data.images,
    
          },
          success: function (res) {
            if (res.statusCode = 200) {
              wx.showModal({
                title: '提示',
                content: '评论成功',
              })
              return;
            }
            else {
              wx.showModal({
                title: '提示',
                content: '评论失败',
              })
            }
          }
        })
        // wx.navigateTo({
        //   url: '../article/article?id= ' + this.data.infoId
        // })
      },
      upload:function(){
        for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
          // console.log("000")
          this.upload_file(this.data.tempFilePaths[i])
        }
      },
      upload_file: function (filepath) {
        var that = this;
      wx.uploadFile({
        url: 'https://********/fileupload/uploader/imgs',
        header: {
          'content-type': 'multipart/form-data'
        },
        filePath: filepath,
        name: 'file',
        formData: {
          file: filepath
        },
      success:function(res){
        that.setData({
          mes:JSON.parse(res.data),
          images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象
        })
        // console.log(that.data.mes.data.filePath)
        // console.log(that.data.images.length + "**********")
        // wx.showToast({
        //   title: 'success',
        // })
      },
      fail: function (res) {
        wx.showToast({
          title: '图片加载失败',
        })
      }
      })
      }
    })

[Center]: /images/20220608/d711ea4f1cda494a80d129544fb6cf74.png