zoukankan      html  css  js  c++  java
  • 坑:微信小程序wx.request和wx.uploadFile中传参数的区别

    微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据。一般提交表单我们都是通过wx.request请求,提交表单数据,通过参数data传数据,

    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
        x: e.detail.value
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
      }
    })
      },
      formReset: function() {
        console.log('form发生了reset事件')
      }
    })

    这样做我们可以在通过接口在后台顺利接收到参数。

    但是还有一种,表单里面涉及到上传图片的情况(ps:微信中图片的上传一次只能上传一张),我们通过wx.uploadFile上传图片,参数filePath是通过wx.chooseImage得到的图片临时路径,这时我们可以通过参数formData来传输表单里的内容,但是如果我们如果还是直接通过e.detail.value得到表单数据直接上传的话,后台能接受到这个参数,但是得不到具体数据,后台接收到的形式是[object object]  这是why?很明显就是因为传输的格式不对,注意:wx.request的content-type 默认为 application/json而wx.uploadFile的content-type 为 multipart/form-data。那么我们怎么传表单数据呢:JSON.stringify(e.detail.value)  就是将json对象转为字符串格式后再传参,这样在后台就可以完美的接受到数值了。

       wx.uploadFile({
          url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            x: JSON.stringify(e.detail.value)
          },
          success (res){
            const data = res.data
            //do something
          }
        })
  • 相关阅读:
    js显示当前时间
    js平滑循环滚动,广告图片文字…
    记录报错Cannot set property 'innerHTML' of null
    回到顶部的几种方法
    vue表单验证 Vee-Validate 的使用
    Vue @mouseover和@mouseout实现下拉二级导航
    线性代数学习笔记——第四章
    线性代数学习笔记——第三章
    线性代数学习笔记——第二章(下)
    线性代数学习笔记——第二章(上)
  • 原文地址:https://www.cnblogs.com/huangshuqiang/p/9907598.html
Copyright © 2011-2022 走看看