微信小程序接口请求/form-data/单文件、多文件上传

1、普通的微信请求封装

const http = (options) =>{
  return new Promise((resolve,reject) => {
    wx.request({
      url: options.url,
      method:options.method || 'get',
      data:options.data || {},
      header: options.header || {
        'content-type':'application/json; charset=utf-8'
      },
      success:resolve,
      fail:reject
    })
  })
}
export default http

在自己写的api.js里import后export

import http from '../http/http.js' 

const functionName = (val1,val2) => {
  return http({
    url:'url',
    data: {},
    method: 'get', //post
    header:{}
  })
}

export default{
    functionName
}

在需要使用api的页面import后调用方法即可

 import api from '../api/api.js' 2 3 api.functionName().then(res =>{ 4 5 console.log(res) 5 6 7 }) 

2、原生微信小程序请求不支持multipart/form-data，当后端接口要求此类型请求时，就需要换一种写法

wx.request({
  url:'url',
  method:'POST', //GET
  header: {
    'content-type':'multipart/form-data; boundary=XXX', //XXX是分隔符的意思
  },
  data:'\r\n--XXX' +
    '\r\nContent-Disposition: form-data; name="key1"' +      //第一个参数key1:val1,固定写法以此类推
    '\r\n' +
    '\r\n' + val1 +
    '\r\n--XXX' +
    '\r\nContent-Disposition: form-data; name="key2"' +
    '\r\n' +
    '\r\n' + val2 +
    '\r\n--XXX--',
    success(res){
      console.log(res)
    }
})

3、对于图片上传，微信小程序有原生的api可以直接调用，不过仅支持单文件上传

wx.uploadFile({
        url: 'url', 
        filePath: imgSrc, //imgSrc是微信小程wx.chooseImage等图片选择接口生成图片的tempFilePaths，无论后端能接收多少个这里都只能放一个，这是这个接口的限制
        name: 'image',   //后端接收图片的字段名
        //请求头
        header:{
          'token':token,
          'content-type':'multipart/form-data',
        },
        //携带的其他参数可以放在这
        formData: {
          key1:val1,
          key2:val2,
        },
        success (res){
          console.log(res)
        }
      })

4、微信小程序原生接口仅支持单文件上传，当需要多图片同时上传时，无法使用循环或者递归的方式上传图片（所以和后端对接要多多沟通），微信小程序无内置formData对象，所以处理起来麻烦点

首先，前往这里：https://github.com/zlyboy/wx-formdata 下载formData.js和mimeMap.js两个文件放进小程序目录里，github上也有对wx-formdata的详细使用说明，也可直接新建js文件复制文末的代码，最好就去看看github

完成了两个js的下载就可以直接使用了

import FormData from '../formdata'

let formData = new FormData();    //新建一个formData对象
formData.append("key1", val1);    //写入参数
formData.append("key2", val2);

//图片，依旧用原生接口选择图片，生成的tempFilePaths是一个图片链接数组，具体去看官方文档
for(let i in tempFilePaths){
      formData.appendFile("image", that.data.tempFilePaths[i]);
}

let data = formData.getData();

//参数写好后，正常请求就好
    wx.request({
      url: 'url',
      method: 'post',
      header: {
        'content-type': data.contentType,
        'token':token,
      },
      data: data.buffer,
      success (res){
        console.log(res)
      }
    });

 

这个是mimeMap.js

//文件mimeMap.js，由formData.js引用
module.exports = {
  "0.001": "application/x-001",
  "0.323": "text/h323",
  "0.907": "drawing/907",
  ".acp": "audio/x-mei-aac",
  ".aif": "audio/aiff",
  ".aiff": "audio/aiff",
  ".asa": "text/asa",
  ".asp": "text/asp",
  ".au": "audio/basic",
  ".awf": "application/vnd.adobe.workflow",
  ".bmp": "application/x-bmp",
  ".c4t": "application/x-c4t",
  ".cal": "application/x-cals",
  ".cdf": "application/x-netcdf",
  ".cel": "application/x-cel",
  ".cg4": "application/x-g4",
  ".cit": "application/x-cit",
  ".cml": "text/xml",
  ".cmx": "application/x-cmx",
  ".crl": "application/pkix-crl",
  ".csi": "application/x-csi",
  ".cut": "application/x-cut",
  ".dbm": "application/x-dbm",
  ".dcd": "text/xml",
  ".der": "application/x-x509-ca-cert",
  ".dib": "application/x-dib",
  ".doc": "application/msword",
  ".drw": "application/x-drw",
  ".dwf": "Model/vnd.dwf",
  ".dwg": "application/x-dwg",
  ".dxf": "application/x-dxf",
  ".emf": "application/x-emf",
  ".ent": "text/xml",
  ".eps": "application/x-ps",
  ".etd": "application/x-ebx",
  ".fax": "image/fax",
  ".fif": "application/fractals",
  ".frm": "application/x-frm",
  ".gbr": "application/x-gbr",
  ".gif": "image/gif",
  ".gp4": "application/x-gp4",
  ".hmr": "application/x-hmr",
  ".hpl": "application/x-hpl",
  ".hrf": "application/x-hrf",
  ".htc": "text/x-component",
  ".html": "text/html",
  ".htx": "text/html",
  ".ico": "image/x-icon",
  ".iff": "application/x-iff",
  ".igs": "application/x-igs",
  ".img": "application/x-img",
  ".isp": "application/x-internet-signup",
  ".java": "java/*",
  ".jpe": "image/jpeg",
  ".jpeg": "image/jpeg",
  ".jpg": "application/x-jpg",
  ".jsp": "text/html",
  ".lar": "application/x-laplayer-reg",
  ".lavs": "audio/x-liquid-secure",
  ".lmsff": "audio/x-la-lms",
  ".ltr": "application/x-ltr",
  ".m2v": "video/x-mpeg",
  ".m4e": "video/mpeg4",
  ".man": "application/x-troff-man",
  ".mdb": "application/msaccess",
  ".mfp": "application/x-shockwave-flash",
  ".mhtml": "message/rfc822",
  ".mid": "audio/mid",
  ".mil": "application/x-mil",
  ".mnd": "audio/x-musicnet-download",
  ".mocha": "application/x-javascript",
  ".mp1": "audio/mp1",
  ".mp2v": "video/mpeg",
  ".mp4": "video/mpeg4",
  ".mpd": "application/vnd.ms-project",
  ".mpeg": "video/mpg",
  ".mpga": "audio/rn-mpeg",
  ".mps": "video/x-mpeg",
  ".mpv": "video/mpg",
  ".mpw": "application/vnd.ms-project",
  ".mtx": "text/xml",
  ".net": "image/pnetvue",
  ".nws": "message/rfc822",
  ".out": "application/x-out",
  ".p12": "application/x-pkcs12",
  ".p7c": "application/pkcs7-mime",
  ".p7r": "application/x-pkcs7-certreqresp",
  ".pc5": "application/x-pc5",
  ".pcl": "application/x-pcl",
  ".pdf": "application/pdf",
  ".pdx": "application/vnd.adobe.pdx",
  ".pgl": "application/x-pgl",
  ".pko": "application/vnd.ms-pki.pko",
  ".plg": "text/html",
  ".plt": "application/x-plt",
  ".png": "application/x-png",
  ".ppa": "application/vnd.ms-powerpoint",
  ".pps": "application/vnd.ms-powerpoint",
  ".ppt": "application/x-ppt",
  ".prf": "application/pics-rules",
  ".prt": "application/x-prt",
  ".ps": "application/postscript",
  ".pwz": "application/vnd.ms-powerpoint",
  ".ra": "audio/vnd.rn-realaudio",
  ".ras": "application/x-ras",
  ".rdf": "text/xml",
  ".red": "application/x-red",
  ".rjs": "application/vnd.rn-realsystem-rjs",
  ".rlc": "application/x-rlc",
  ".rm": "application/vnd.rn-realmedia",
  ".rmi": "audio/mid",
  ".rmm": "audio/x-pn-realaudio",
  ".rms": "application/vnd.rn-realmedia-secure",
  ".rmx": "application/vnd.rn-realsystem-rmx",
  ".rp": "image/vnd.rn-realpix",
  ".rsml": "application/vnd.rn-rsml",
  ".rtf": "application/msword",
  ".rv": "video/vnd.rn-realvideo",
  ".sat": "application/x-sat",
  ".sdw": "application/x-sdw",
  ".slb": "application/x-slb",
  ".slk": "drawing/x-slk",
  ".smil": "application/smil",
  ".snd": "audio/basic",
  ".sor": "text/plain",
  ".spl": "application/futuresplash",
  ".ssm": "application/streamingmedia",
  ".stl": "application/vnd.ms-pki.stl",
  ".sty": "application/x-sty",
  ".swf": "application/x-shockwave-flash",
  ".tg4": "application/x-tg4",
  ".tif": "image/tiff",
  ".tiff": "image/tiff",
  ".top": "drawing/x-top",
  ".tsd": "text/xml",
  ".uin": "application/x-icq",
  ".vcf": "text/x-vcard",
  ".vdx": "application/vnd.visio",
  ".vpg": "application/x-vpeg005",
  ".vsd": "application/x-vsd",
  ".vst": "application/vnd.visio",
  ".vsw": "application/vnd.visio",
  ".vtx": "application/vnd.visio",
  ".wav": "audio/wav",
  ".wb1": "application/x-wb1",
  ".wb3": "application/x-wb3",
  ".wiz": "application/msword",
  ".wk4": "application/x-wk4",
  ".wks": "application/x-wks",
  ".wma": "audio/x-ms-wma",
  ".wmf": "application/x-wmf",
  ".wmv": "video/x-ms-wmv",
  ".wmz": "application/x-ms-wmz",
  ".wpd": "application/x-wpd",
  ".wpl": "application/vnd.ms-wpl",
  ".wr1": "application/x-wr1",
  ".wrk": "application/x-wrk",
  ".ws2": "application/x-ws",
  ".wsdl": "text/xml",
  ".xdp": "application/vnd.adobe.xdp",
  ".xfd": "application/vnd.adobe.xfd",
  ".xhtml": "text/html",
  ".xls": "application/x-xls",
  ".xml": "text/xml",
  ".xq": "text/xml",
  ".xquery": "text/xml",
  ".xsl": "text/xml",
  ".xwd": "application/x-xwd",
  ".sis": "application/vnd.symbian.install",
  ".x_t": "application/x-x_t",
  ".apk": "application/vnd.android.package-archive",
  "0.301": "application/x-301",
  "0.906": "application/x-906",
  ".a11": "application/x-a11",
  ".ai": "application/postscript",
  ".aifc": "audio/aiff",
  ".anv": "application/x-anv",
  ".asf": "video/x-ms-asf",
  ".asx": "video/x-ms-asf",
  ".avi": "video/avi",
  ".biz": "text/xml",
  ".bot": "application/x-bot",
  ".c90": "application/x-c90",
  ".cat": "application/vnd.ms-pki.seccat",
  ".cdr": "application/x-cdr",
  ".cer": "application/x-x509-ca-cert",
  ".cgm": "application/x-cgm",
  ".class": "java/*",
  ".cmp": "application/x-cmp",
  ".cot": "application/x-cot",
  ".crt": "application/x-x509-ca-cert",
  ".css": "text/css",
  ".dbf": "application/x-dbf",
  ".dbx": "application/x-dbx",
  ".dcx": "application/x-dcx",
  ".dgn": "application/x-dgn",
  ".dll": "application/x-msdownload",
  ".dot": "application/msword",
  ".dtd": "text/xml",
  ".dwf": "application/x-dwf",
  ".dxb": "application/x-dxb",
  ".edn": "application/vnd.adobe.edn",
  ".eml": "message/rfc822",
  ".epi": "application/x-epi",
  ".eps": "application/postscript",
  ".exe": "application/x-msdownload",
  ".fdf": "application/vnd.fdf",
  ".fo": "text/xml",
  ".g4": "application/x-g4",
  ".tif": "image/tiff",
  ".gl2": "application/x-gl2",
  ".hgl": "application/x-hgl",
  ".hpg": "application/x-hpgl",
  ".hqx": "application/mac-binhex40",
  ".hta": "application/hta",
  ".htm": "text/html",
  ".htt": "text/webviewhtml",
  ".icb": "application/x-icb",
  ".ico": "application/x-ico",
  ".ig4": "application/x-g4",
  ".iii": "application/x-iphone",
  ".ins": "application/x-internet-signup",
  ".IVF": "video/x-ivf",
  ".jfif": "image/jpeg",
  ".jpe": "application/x-jpe",
  ".jpg": "image/jpeg",
  ".js": "application/x-javascript",
  ".la1": "audio/x-liquid-file",
  ".latex": "application/x-latex",
  ".lbm": "application/x-lbm",
  ".ls": "application/x-javascript",
  ".m1v": "video/x-mpeg",
  ".m3u": "audio/mpegurl",
  ".mac": "application/x-mac",
  ".math": "text/xml",
  ".mdb": "application/x-mdb",
  ".mht": "message/rfc822",
  ".mi": "application/x-mi",
  ".midi": "audio/mid",
  ".mml": "text/xml",
  ".mns": "audio/x-musicnet-stream",
  ".movie": "video/x-sgi-movie",
  ".mp2": "audio/mp2",
  ".mp3": "audio/mp3",
  ".mpa": "video/x-mpg",
  ".mpe": "video/x-mpeg",
  ".mpg": "video/mpg",
  ".mpp": "application/vnd.ms-project",
  ".mpt": "application/vnd.ms-project",
  ".mpv2": "video/mpeg",
  ".mpx": "application/vnd.ms-project",
  ".mxp": "application/x-mmxp",
  ".nrf": "application/x-nrf",
  ".odc": "text/x-ms-odc",
  ".p10": "application/pkcs10",
  ".p7b": "application/x-pkcs7-certificates",
  ".p7m": "application/pkcs7-mime",
  ".p7s": "application/pkcs7-signature",
  ".pci": "application/x-pci",
  ".pcx": "application/x-pcx",
  ".pdf": "application/pdf",
  ".pfx": "application/x-pkcs12",
  ".pic": "application/x-pic",
  ".pl": "application/x-perl",
  ".pls": "audio/scpls",
  ".png": "image/png",
  ".pot": "application/vnd.ms-powerpoint",
  ".ppm": "application/x-ppm",
  ".ppt": "application/vnd.ms-powerpoint",
  ".pr": "application/x-pr",
  ".prn": "application/x-prn",
  ".ps": "application/x-ps",
  ".ptn": "application/x-ptn",
  ".r3t": "text/vnd.rn-realtext3d",
  ".ram": "audio/x-pn-realaudio",
  ".rat": "application/rat-file",
  ".rec": "application/vnd.rn-recording",
  ".rgb": "application/x-rgb",
  ".rjt": "application/vnd.rn-realsystem-rjt",
  ".rle": "application/x-rle",
  ".rmf": "application/vnd.adobe.rmf",
  ".rmj": "application/vnd.rn-realsystem-rmj",
  ".rmp": "application/vnd.rn-rn_music_package",
  ".rmvb": "application/vnd.rn-realmedia-vbr",
  ".rnx": "application/vnd.rn-realplayer",
  ".rpm": "audio/x-pn-realaudio-plugin",
  ".rt": "text/vnd.rn-realtext",
  ".rtf": "application/x-rtf",
  ".sam": "application/x-sam",
  ".sdp": "application/sdp",
  ".sit": "application/x-stuffit",
  ".sld": "application/x-sld",
  ".smi": "application/smil",
  ".smk": "application/x-smk",
  ".sol": "text/plain",
  ".spc": "application/x-pkcs7-certificates",
  ".spp": "text/xml",
  ".sst": "application/vnd.ms-pki.certstore",
  ".stm": "text/html",
  ".svg": "text/xml",
  ".tdf": "application/x-tdf",
  ".tga": "application/x-tga",
  ".tif": "application/x-tif",
  ".tld": "text/xml",
  ".torrent": "application/x-bittorrent",
  ".txt": "text/plain",
  ".uls": "text/iuls",
  ".vda": "application/x-vda",
  ".vml": "text/xml",
  ".vsd": "application/vnd.visio",
  ".vss": "application/vnd.visio",
  ".vst": "application/x-vst",
  ".vsx": "application/vnd.visio",
  ".vxml": "text/xml",
  ".wax": "audio/x-ms-wax",
  ".wb2": "application/x-wb2",
  ".wbmp": "image/vnd.wap.wbmp",
  ".wk3": "application/x-wk3",
  ".wkq": "application/x-wkq",
  ".wm": "video/x-ms-wm",
  ".wmd": "application/x-ms-wmd",
  ".wml": "text/vnd.wap.wml",
  ".wmx": "video/x-ms-wmx",
  ".wp6": "application/x-wp6",
  ".wpg": "application/x-wpg",
  ".wq1": "application/x-wq1",
  ".wri": "application/x-wri",
  ".ws": "application/x-ws",
  ".wsc": "text/scriptlet",
  ".wvx": "video/x-ms-wvx",
  ".xdr": "text/xml",
  ".xfdf": "application/vnd.adobe.xfdf",
  ".xls": "application/vnd.ms-excel",
  ".xlw": "application/x-xlw",
  ".xpl": "audio/scpls",
  ".xql": "text/xml",
  ".xsd": "text/xml",
  ".xslt": "text/xml",
  ".x_b": "application/x-x_b",
  ".sisx": "application/vnd.symbian.install",
  ".ipa": "application/vnd.iphone",
  ".xap": "application/x-silverlight-app",
  ".zip": "application/x-zip-compressed",
}

这个是formData.js

// 文件 formData.js
const mimeMap = require('./mimeMap.js')
 
function FormData(){
  let fileManager = wx.getFileSystemManager();
  let data = {};
  let files = [];
 
  this.append = (name, value)=>{
    data[name] = value;
    return true;
  }
 
  this.appendFile = (name, path, fileName)=>{
    let buffer = fileManager.readFileSync(path);
    if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){
      return false;
    }
 
    if(!fileName){
      fileName = getFileNameFromPath(path);
    }
 
    files.push({
      name: name,
      buffer: buffer,
      fileName: fileName
    });
    return true;
  }
 
  this.getData = ()=>convert(data, files)
}
 
function getFileNameFromPath(path){
  let idx=path.lastIndexOf("/");
  return path.substr(idx+1);
}
 
function convert(data, files){
  let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符，一般是随机的字符串
  let boundary = '--' + boundaryKey;
  let endBoundary = boundary + '--';
 
  let postArray = [];
  //拼接参数
  if(data && Object.prototype.toString.call(data) == "[object Object]"){
    for(let key in data){
      postArray = postArray.concat(formDataArray(boundary, key, data[key]));
    }
  }
  //拼接文件
  if(files && Object.prototype.toString.call(files) == "[object Array]"){
    for(let i in files){
      let file = files[i];
      postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName));
    }
  }
  //结尾
  let endBoundaryArray = [];
  endBoundaryArray.push(...endBoundary.toUtf8Bytes());
  postArray = postArray.concat(endBoundaryArray);
  return {
    contentType: 'multipart/form-data; boundary=' + boundaryKey,
    buffer: new Uint8Array(postArray).buffer
  }
}
 
function randString() {
  let res = "";
  for (let i = 0; i < 17; i++) {
    let n = parseInt(Math.random() * 62);
    if (n <= 9) {
      res += n;
    }
    else if (n <= 35) {
      res += String.fromCharCode(n + 55);
    }
    else {
      res += String.fromCharCode(n + 61);
    }
  }
  return res;
}
 
function formDataArray(boundary, name, value, fileName){
  let dataString = '';
  let isFile = !!fileName;
 
  dataString += boundary + '\r\n';
  dataString += 'Content-Disposition: form-data; name="' + name + '"';
  if (isFile){
    dataString += '; filename="' + fileName + '"' + '\r\n';
    dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n';
  }
  else{
    dataString += '\r\n\r\n';
    dataString += value;
  }
 
  var dataArray = [];
  dataArray.push(...dataString.toUtf8Bytes());
 
  if (isFile) {
    let fileArray = new Uint8Array(value);
    dataArray = dataArray.concat(Array.prototype.slice.call(fileArray));
  }
  dataArray.push(..."\r".toUtf8Bytes());
  dataArray.push(..."\n".toUtf8Bytes());
 
  return dataArray;
}
 
function getFileMime(fileName){
  let idx = fileName.lastIndexOf(".");
  let mime = mimeMap[fileName.substr(idx)];
  return mime?mime:"application/octet-stream"
}
 
String.prototype.toUtf8Bytes = function(){
  var str = this;
  var bytes = [];
  for (var i = 0; i < str.length; i++) {
    bytes.push(...str.utf8CodeAt(i));
    if (str.codePointAt(i) > 0xffff) {
      i++;
    }
  }
  return bytes;
}
 
String.prototype.utf8CodeAt = function(i) {
  var str = this;
  var out = [], p = 0;
  var c = str.charCodeAt(i);
  if (c < 128) {
    out[p++] = c;
  } else if (c < 2048) {
    out[p++] = (c >> 6) | 192;
    out[p++] = (c & 63) | 128;
  } else if (
      ((c & 0xFC00) == 0xD800) && (i + 1) < str.length &&
      ((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) {
    // Surrogate Pair
    c = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF);
    out[p++] = (c >> 18) | 240;
    out[p++] = ((c >> 12) & 63) | 128;
    out[p++] = ((c >> 6) & 63) | 128;
    out[p++] = (c & 63) | 128;
  } else {
    out[p++] = (c >> 12) | 224;
    out[p++] = ((c >> 6) & 63) | 128;
    out[p++] = (c & 63) | 128;
  }
  return out;
};
 
 
module.exports = FormData;