微信小程序formdata格式请求

使用wx.uploadFile实现

javascript 复制代码
    wx.uploadFile({
      url: 'https://接口地址', //上传服务器地址
      filePath: '', //要上传文件资源的路径(本地路径)
      name: 'file', //文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
      header: { //HTTP 请求 Header,Header 中不能设置 Referer
        Authorization: 'Bearer token' //权限
      },
      formData: {//HTTP 请求中其他额外的 form data
        'test': 'test',
     	'test1': 'test1',
         ...
      },
      //上传成功回调
      success: (res) => {
        //上传成功
        console.log('success')
        console.log(res)
		//res.data为字符串
        var data = JSON.parse(res.data); //字符串转为对象
      },
      //上传失败回调
      fail: function(err) {
     	console.log('fail')
        console.log(err);
      },
    })

使用wx.request封装formdata数据

下载

formData.js mimeMap.js

页面中引入js文件

复制代码
const FormData = require('./formData.js')   根据您存放的位置进行引入哟

使用

1、new一个FormData对象
复制代码
let formData = new FormData();
2、调用它的append()方法来添加字段或者调用appendFile()方法添加文件
复制代码
// name	value中包含的数据对应的表单名称;value 表单的值
formData.append("name", "value"); 

//name	value中包含的数据对应的表单名称;filepath	文件路径;fileName 文件名【可选】
formData.appendFile("file", filepath, "文件名"); 
3、添加完成后调用它的getData()生成上传数据
复制代码
//返回值对象属性:buffer	表单数据的ArrayBuffer对象;contentType  http请求Content-Type头部内容
let data = formData.getData();
4、调用小程序的wx.request提交请求
javascript 复制代码
wx.request({
  url: 'https://接口地址',
  header: {
    'content-type': data.contentType
  },
  data: data.buffer,
  success: res => {
  },
  fail: err => {
  }
});
相关推荐
海晨忆22 分钟前
【Vue】v-if和v-show的区别
前端·javascript·vue.js·v-show·v-if
JiangJiang1 小时前
🚀 Vue人看React useRef:它不只是替代 ref
javascript·react.js·面试
1024小神1 小时前
在GitHub action中使用添加项目中配置文件的值为环境变量
前端·javascript
龙骑utr1 小时前
qiankun微应用动态设置静态资源访问路径
javascript
Jasmin Tin Wei1 小时前
css易混淆的知识点
开发语言·javascript·ecmascript
齐尹秦1 小时前
CSS 列表样式学习笔记
前端
wsz77771 小时前
js封装系列(一)
javascript
Mnxj1 小时前
渐变边框设计
前端
用户7678797737321 小时前
由Umi升级到Next方案
前端·next.js
快乐的小前端1 小时前
TypeScript基础一
前端