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

  • 微信小程序接口请求/form-data/单文件、多文件上传已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

1、普通的微信请求封装在自己写的api.js里import后export在需要使用api的页面import后调用方法即可

1、普通的微信请求封装

 1 const http = (options) =>{  2   return new Promise((resolve,reject) => {  3     wx.request({  4       url: options.url,  5       method:options.method || 'get',  6       data:options.data || {},  7       header: options.header || {  8         'content-type':'application/json; charset=utf-8'  9       }, 10       success:resolve, 11       fail:reject 12     }) 13   }) 14 } 15 export default http

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

 1 import http from '../http/http.js'   2   3 const functionName = (val1,val2) => {  4   return http({  5     url:'url',  6     data: {},  7     method: 'get', //post  8     header:{}  9   }) 10 } 11  12 export default{ 13     functionName 14 }

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

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

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

 1 wx.request({  2   url:'url',  3   method:'POST', //GET  4   header: {  5     'content-type':'multipart/form-data; boundary=XXX', //XXX是分隔符的意思  6   },  7   data:'rn--XXX' +  8     'rnContent-Disposition: form-data; name="key1"' +      //第一个参数key1:val1,固定写法以此类推  9     'rn' + 10     'rn' + val1 + 11     'rn--XXX' + 12     'rnContent-Disposition: form-data; name="key2"' + 13     'rn' + 14     'rn' + val2 + 15     'rn--XXX--', 16     success(res){ 17       console.log(res) 18     } 19 })

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

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

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

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

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

 1 import FormData from '../formdata'  2   3 let formData = new FormData();    //新建一个formData对象  4 formData.append("key1", val1);    //写入参数  5 formData.append("key2", val2);  6   7 //图片,依旧用原生接口选择图片,生成的tempFilePaths是一个图片链接数组,具体去看官方文档  8 for(let i in tempFilePaths){  9       formData.appendFile("image", that.data.tempFilePaths[i]); 10 } 11  12 let data = formData.getData(); 13  14 //参数写好后,正常请求就好 15     wx.request({ 16       url: 'url', 17       method: 'post', 18       header: { 19         'content-type': data.contentType, 20         'token':token, 21       }, 22       data: data.buffer, 23       success (res){ 24         console.log(res) 25       } 26     });

 

这个是mimeMap.js

  1 //文件mimeMap.js,由formData.js引用   2 module.exports = {   3   "0.001": "application/x-001",   4   "0.323": "text/h323",   5   "0.907": "drawing/907",   6   ".acp": "audio/x-mei-aac",   7   ".aif": "audio/aiff",   8   ".aiff": "audio/aiff",   9   ".asa": "text/asa",  10   ".asp": "text/asp",  11   ".au": "audio/basic",  12   ".awf": "application/vnd.adobe.workflow",  13   ".bmp": "application/x-bmp",  14   ".c4t": "application/x-c4t",  15   ".cal": "application/x-cals",  16   ".cdf": "application/x-netcdf",  17   ".cel": "application/x-cel",  18   ".cg4": "application/x-g4",  19   ".cit": "application/x-cit",  20   ".cml": "text/xml",  21   ".cmx": "application/x-cmx",  22   ".crl": "application/pkix-crl",  23   ".csi": "application/x-csi",  24   ".cut": "application/x-cut",  25   ".dbm": "application/x-dbm",  26   ".dcd": "text/xml",  27   ".der": "application/x-x509-ca-cert",  28   ".dib": "application/x-dib",  29   ".doc": "application/msword",  30   ".drw": "application/x-drw",  31   ".dwf": "Model/vnd.dwf",  32   ".dwg": "application/x-dwg",  33   ".dxf": "application/x-dxf",  34   ".emf": "application/x-emf",  35   ".ent": "text/xml",  36   ".eps": "application/x-ps",  37   ".etd": "application/x-ebx",  38   ".fax": "image/fax",  39   ".fif": "application/fractals",  40   ".frm": "application/x-frm",  41   ".gbr": "application/x-gbr",  42   ".gif": "image/gif",  43   ".gp4": "application/x-gp4",  44   ".hmr": "application/x-hmr",  45   ".hpl": "application/x-hpl",  46   ".hrf": "application/x-hrf",  47   ".htc": "text/x-component",  48   ".html": "text/html",  49   ".htx": "text/html",  50   ".ico": "image/x-icon",  51   ".iff": "application/x-iff",  52   ".igs": "application/x-igs",  53   ".img": "application/x-img",  54   ".isp": "application/x-internet-signup",  55   ".java": "java/*",  56   ".jpe": "image/jpeg",  57   ".jpeg": "image/jpeg",  58   ".jpg": "application/x-jpg",  59   ".jsp": "text/html",  60   ".lar": "application/x-laplayer-reg",  61   ".lavs": "audio/x-liquid-secure",  62   ".lmsff": "audio/x-la-lms",  63   ".ltr": "application/x-ltr",  64   ".m2v": "video/x-mpeg",  65   ".m4e": "video/mpeg4",  66   ".man": "application/x-troff-man",  67   ".mdb": "application/msaccess",  68   ".mfp": "application/x-shockwave-flash",  69   ".mhtml": "message/rfc822",  70   ".mid": "audio/mid",  71   ".mil": "application/x-mil",  72   ".mnd": "audio/x-musicnet-download",  73   ".mocha": "application/x-javascript",  74   ".mp1": "audio/mp1",  75   ".mp2v": "video/mpeg",  76   ".mp4": "video/mpeg4",  77   ".mpd": "application/vnd.ms-project",  78   ".mpeg": "video/mpg",  79   ".mpga": "audio/rn-mpeg",  80   ".mps": "video/x-mpeg",  81   ".mpv": "video/mpg",  82   ".mpw": "application/vnd.ms-project",  83   ".mtx": "text/xml",  84   ".net": "image/pnetvue",  85   ".nws": "message/rfc822",  86   ".out": "application/x-out",  87   ".p12": "application/x-pkcs12",  88   ".p7c": "application/pkcs7-mime",  89   ".p7r": "application/x-pkcs7-certreqresp",  90   ".pc5": "application/x-pc5",  91   ".pcl": "application/x-pcl",  92   ".pdf": "application/pdf",  93   ".pdx": "application/vnd.adobe.pdx",  94   ".pgl": "application/x-pgl",  95   ".pko": "application/vnd.ms-pki.pko",  96   ".plg": "text/html",  97   ".plt": "application/x-plt",  98   ".png": "application/x-png",  99   ".ppa": "application/vnd.ms-powerpoint", 100   ".pps": "application/vnd.ms-powerpoint", 101   ".ppt": "application/x-ppt", 102   ".prf": "application/pics-rules", 103   ".prt": "application/x-prt", 104   ".ps": "application/postscript", 105   ".pwz": "application/vnd.ms-powerpoint", 106   ".ra": "audio/vnd.rn-realaudio", 107   ".ras": "application/x-ras", 108   ".rdf": "text/xml", 109   ".red": "application/x-red", 110   ".rjs": "application/vnd.rn-realsystem-rjs", 111   ".rlc": "application/x-rlc", 112   ".rm": "application/vnd.rn-realmedia", 113   ".rmi": "audio/mid", 114   ".rmm": "audio/x-pn-realaudio", 115   ".rms": "application/vnd.rn-realmedia-secure", 116   ".rmx": "application/vnd.rn-realsystem-rmx", 117   ".rp": "image/vnd.rn-realpix", 118   ".rsml": "application/vnd.rn-rsml", 119   ".rtf": "application/msword", 120   ".rv": "video/vnd.rn-realvideo", 121   ".sat": "application/x-sat", 122   ".sdw": "application/x-sdw", 123   ".slb": "application/x-slb", 124   ".slk": "drawing/x-slk", 125   ".smil": "application/smil", 126   ".snd": "audio/basic", 127   ".sor": "text/plain", 128   ".spl": "application/futuresplash", 129   ".ssm": "application/streamingmedia", 130   ".stl": "application/vnd.ms-pki.stl", 131   ".sty": "application/x-sty", 132   ".swf": "application/x-shockwave-flash", 133   ".tg4": "application/x-tg4", 134   ".tif": "image/tiff", 135   ".tiff": "image/tiff", 136   ".top": "drawing/x-top", 137   ".tsd": "text/xml", 138   ".uin": "application/x-icq", 139   ".vcf": "text/x-vcard", 140   ".vdx": "application/vnd.visio", 141   ".vpg": "application/x-vpeg005", 142   ".vsd": "application/x-vsd", 143   ".vst": "application/vnd.visio", 144   ".vsw": "application/vnd.visio", 145   ".vtx": "application/vnd.visio", 146   ".wav": "audio/wav", 147   ".wb1": "application/x-wb1", 148   ".wb3": "application/x-wb3", 149   ".wiz": "application/msword", 150   ".wk4": "application/x-wk4", 151   ".wks": "application/x-wks", 152   ".wma": "audio/x-ms-wma", 153   ".wmf": "application/x-wmf", 154   ".wmv": "video/x-ms-wmv", 155   ".wmz": "application/x-ms-wmz", 156   ".wpd": "application/x-wpd", 157   ".wpl": "application/vnd.ms-wpl", 158   ".wr1": "application/x-wr1", 159   ".wrk": "application/x-wrk", 160   ".ws2": "application/x-ws", 161   ".wsdl": "text/xml", 162   ".xdp": "application/vnd.adobe.xdp", 163   ".xfd": "application/vnd.adobe.xfd", 164   ".xhtml": "text/html", 165   ".xls": "application/x-xls", 166   ".xml": "text/xml", 167   ".xq": "text/xml", 168   ".xquery": "text/xml", 169   ".xsl": "text/xml", 170   ".xwd": "application/x-xwd", 171   ".sis": "application/vnd.symbian.install", 172   ".x_t": "application/x-x_t", 173   ".apk": "application/vnd.android.package-archive", 174   "0.301": "application/x-301", 175   "0.906": "application/x-906", 176   ".a11": "application/x-a11", 177   ".ai": "application/postscript", 178   ".aifc": "audio/aiff", 179   ".anv": "application/x-anv", 180   ".asf": "video/x-ms-asf", 181   ".asx": "video/x-ms-asf", 182   ".avi": "video/avi", 183   ".biz": "text/xml", 184   ".bot": "application/x-bot", 185   ".c90": "application/x-c90", 186   ".cat": "application/vnd.ms-pki.seccat", 187   ".cdr": "application/x-cdr", 188   ".cer": "application/x-x509-ca-cert", 189   ".cgm": "application/x-cgm", 190   ".class": "java/*", 191   ".cmp": "application/x-cmp", 192   ".cot": "application/x-cot", 193   ".crt": "application/x-x509-ca-cert", 194   ".css": "text/css", 195   ".dbf": "application/x-dbf", 196   ".dbx": "application/x-dbx", 197   ".dcx": "application/x-dcx", 198   ".dgn": "application/x-dgn", 199   ".dll": "application/x-msdownload", 200   ".dot": "application/msword", 201   ".dtd": "text/xml", 202   ".dwf": "application/x-dwf", 203   ".dxb": "application/x-dxb", 204   ".edn": "application/vnd.adobe.edn", 205   ".eml": "message/rfc822", 206   ".epi": "application/x-epi", 207   ".eps": "application/postscript", 208   ".exe": "application/x-msdownload", 209   ".fdf": "application/vnd.fdf", 210   ".fo": "text/xml", 211   ".g4": "application/x-g4", 212   ".tif": "image/tiff", 213   ".gl2": "application/x-gl2", 214   ".hgl": "application/x-hgl", 215   ".hpg": "application/x-hpgl", 216   ".hqx": "application/mac-binhex40", 217   ".hta": "application/hta", 218   ".htm": "text/html", 219   ".htt": "text/webviewhtml", 220   ".icb": "application/x-icb", 221   ".ico": "application/x-ico", 222   ".ig4": "application/x-g4", 223   ".iii": "application/x-iphone", 224   ".ins": "application/x-internet-signup", 225   ".IVF": "video/x-ivf", 226   ".jfif": "image/jpeg", 227   ".jpe": "application/x-jpe", 228   ".jpg": "image/jpeg", 229   ".js": "application/x-javascript", 230   ".la1": "audio/x-liquid-file", 231   ".latex": "application/x-latex", 232   ".lbm": "application/x-lbm", 233   ".ls": "application/x-javascript", 234   ".m1v": "video/x-mpeg", 235   ".m3u": "audio/mpegurl", 236   ".mac": "application/x-mac", 237   ".math": "text/xml", 238   ".mdb": "application/x-mdb", 239   ".mht": "message/rfc822", 240   ".mi": "application/x-mi", 241   ".midi": "audio/mid", 242   ".mml": "text/xml", 243   ".mns": "audio/x-musicnet-stream", 244   ".movie": "video/x-sgi-movie", 245   ".mp2": "audio/mp2", 246   ".mp3": "audio/mp3", 247   ".mpa": "video/x-mpg", 248   ".mpe": "video/x-mpeg", 249   ".mpg": "video/mpg", 250   ".mpp": "application/vnd.ms-project", 251   ".mpt": "application/vnd.ms-project", 252   ".mpv2": "video/mpeg", 253   ".mpx": "application/vnd.ms-project", 254   ".mxp": "application/x-mmxp", 255   ".nrf": "application/x-nrf", 256   ".odc": "text/x-ms-odc", 257   ".p10": "application/pkcs10", 258   ".p7b": "application/x-pkcs7-certificates", 259   ".p7m": "application/pkcs7-mime", 260   ".p7s": "application/pkcs7-signature", 261   ".pci": "application/x-pci", 262   ".pcx": "application/x-pcx", 263   ".pdf": "application/pdf", 264   ".pfx": "application/x-pkcs12", 265   ".pic": "application/x-pic", 266   ".pl": "application/x-perl", 267   ".pls": "audio/scpls", 268   ".png": "image/png", 269   ".pot": "application/vnd.ms-powerpoint", 270   ".ppm": "application/x-ppm", 271   ".ppt": "application/vnd.ms-powerpoint", 272   ".pr": "application/x-pr", 273   ".prn": "application/x-prn", 274   ".ps": "application/x-ps", 275   ".ptn": "application/x-ptn", 276   ".r3t": "text/vnd.rn-realtext3d", 277   ".ram": "audio/x-pn-realaudio", 278   ".rat": "application/rat-file", 279   ".rec": "application/vnd.rn-recording", 280   ".rgb": "application/x-rgb", 281   ".rjt": "application/vnd.rn-realsystem-rjt", 282   ".rle": "application/x-rle", 283   ".rmf": "application/vnd.adobe.rmf", 284   ".rmj": "application/vnd.rn-realsystem-rmj", 285   ".rmp": "application/vnd.rn-rn_music_package", 286   ".rmvb": "application/vnd.rn-realmedia-vbr", 287   ".rnx": "application/vnd.rn-realplayer", 288   ".rpm": "audio/x-pn-realaudio-plugin", 289   ".rt": "text/vnd.rn-realtext", 290   ".rtf": "application/x-rtf", 291   ".sam": "application/x-sam", 292   ".sdp": "application/sdp", 293   ".sit": "application/x-stuffit", 294   ".sld": "application/x-sld", 295   ".smi": "application/smil", 296   ".smk": "application/x-smk", 297   ".sol": "text/plain", 298   ".spc": "application/x-pkcs7-certificates", 299   ".spp": "text/xml", 300   ".sst": "application/vnd.ms-pki.certstore", 301   ".stm": "text/html", 302   ".svg": "text/xml", 303   ".tdf": "application/x-tdf", 304   ".tga": "application/x-tga", 305   ".tif": "application/x-tif", 306   ".tld": "text/xml", 307   ".torrent": "application/x-bittorrent", 308   ".txt": "text/plain", 309   ".uls": "text/iuls", 310   ".vda": "application/x-vda", 311   ".vml": "text/xml", 312   ".vsd": "application/vnd.visio", 313   ".vss": "application/vnd.visio", 314   ".vst": "application/x-vst", 315   ".vsx": "application/vnd.visio", 316   ".vxml": "text/xml", 317   ".wax": "audio/x-ms-wax", 318   ".wb2": "application/x-wb2", 319   ".wbmp": "image/vnd.wap.wbmp", 320   ".wk3": "application/x-wk3", 321   ".wkq": "application/x-wkq", 322   ".wm": "video/x-ms-wm", 323   ".wmd": "application/x-ms-wmd", 324   ".wml": "text/vnd.wap.wml", 325   ".wmx": "video/x-ms-wmx", 326   ".wp6": "application/x-wp6", 327   ".wpg": "application/x-wpg", 328   ".wq1": "application/x-wq1", 329   ".wri": "application/x-wri", 330   ".ws": "application/x-ws", 331   ".wsc": "text/scriptlet", 332   ".wvx": "video/x-ms-wvx", 333   ".xdr": "text/xml", 334   ".xfdf": "application/vnd.adobe.xfdf", 335   ".xls": "application/vnd.ms-excel", 336   ".xlw": "application/x-xlw", 337   ".xpl": "audio/scpls", 338   ".xql": "text/xml", 339   ".xsd": "text/xml", 340   ".xslt": "text/xml", 341   ".x_b": "application/x-x_b", 342   ".sisx": "application/vnd.symbian.install", 343   ".ipa": "application/vnd.iphone", 344   ".xap": "application/x-silverlight-app", 345   ".zip": "application/x-zip-compressed", 346 }

这个是formData.js

  1 // 文件 formData.js   2 const mimeMap = require('./mimeMap.js')   3     4 function FormData(){   5   let fileManager = wx.getFileSystemManager();   6   let data = {};   7   let files = [];   8     9   this.append = (name, value)=>{  10     data[name] = value;  11     return true;  12   }  13    14   this.appendFile = (name, path, fileName)=>{  15     let buffer = fileManager.readFileSync(path);  16     if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){  17       return false;  18     }  19    20     if(!fileName){  21       fileName = getFileNameFromPath(path);  22     }  23    24     files.push({  25       name: name,  26       buffer: buffer,  27       fileName: fileName  28     });  29     return true;  30   }  31    32   this.getData = ()=>convert(data, files)  33 }  34    35 function getFileNameFromPath(path){  36   let idx=path.lastIndexOf("/");  37   return path.substr(idx+1);  38 }  39    40 function convert(data, files){  41   let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符,一般是随机的字符串  42   let boundary = '--' + boundaryKey;  43   let endBoundary = boundary + '--';  44    45   let postArray = [];  46   //拼接参数  47   if(data && Object.prototype.toString.call(data) == "[object Object]"){  48     for(let key in data){  49       postArray = postArray.concat(formDataArray(boundary, key, data[key]));  50     }  51   }  52   //拼接文件  53   if(files && Object.prototype.toString.call(files) == "[object Array]"){  54     for(let i in files){  55       let file = files[i];  56       postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName));  57     }  58   }  59   //结尾  60   let endBoundaryArray = [];  61   endBoundaryArray.push(...endBoundary.toUtf8Bytes());  62   postArray = postArray.concat(endBoundaryArray);  63   return {  64     contentType: 'multipart/form-data; boundary=' + boundaryKey,  65     buffer: new Uint8Array(postArray).buffer  66   }  67 }  68    69 function randString() {  70   let res = "";  71   for (let i = 0; i < 17; i++) {  72     let n = parseInt(Math.random() * 62);  73     if (n <= 9) {  74       res += n;  75     }  76     else if (n <= 35) {  77       res += String.fromCharCode(n + 55);  78     }  79     else {  80       res += String.fromCharCode(n + 61);  81     }  82   }  83   return res;  84 }  85    86 function formDataArray(boundary, name, value, fileName){  87   let dataString = '';  88   let isFile = !!fileName;  89    90   dataString += boundary + 'rn';  91   dataString += 'Content-Disposition: form-data; name="' + name + '"';  92   if (isFile){  93     dataString += '; filename="' + fileName + '"' + 'rn';  94     dataString += 'Content-Type: ' + getFileMime(fileName) + 'rnrn';  95   }  96   else{  97     dataString += 'rnrn';  98     dataString += value;  99   } 100   101   var dataArray = []; 102   dataArray.push(...dataString.toUtf8Bytes()); 103   104   if (isFile) { 105     let fileArray = new Uint8Array(value); 106     dataArray = dataArray.concat(Array.prototype.slice.call(fileArray)); 107   } 108   dataArray.push(..."r".toUtf8Bytes()); 109   dataArray.push(..."n".toUtf8Bytes()); 110   111   return dataArray; 112 } 113   114 function getFileMime(fileName){ 115   let idx = fileName.lastIndexOf("."); 116   let mime = mimeMap[fileName.substr(idx)]; 117   return mime?mime:"application/octet-stream" 118 } 119   120 String.prototype.toUtf8Bytes = function(){ 121   var str = this; 122   var bytes = []; 123   for (var i = 0; i < str.length; i++) { 124     bytes.push(...str.utf8CodeAt(i)); 125     if (str.codePointAt(i) > 0xffff) { 126       i++; 127     } 128   } 129   return bytes; 130 } 131   132 String.prototype.utf8CodeAt = function(i) { 133   var str = this; 134   var out = [], p = 0; 135   var c = str.charCodeAt(i); 136   if (c < 128) { 137     out[p++] = c; 138   } else if (c < 2048) { 139     out[p++] = (c >> 6) | 192; 140     out[p++] = (c & 63) | 128; 141   } else if ( 142       ((c & 0xFC00) == 0xD800) && (i + 1) < str.length && 143       ((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) { 144     // Surrogate Pair 145     c = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF); 146     out[p++] = (c >> 18) | 240; 147     out[p++] = ((c >> 12) & 63) | 128; 148     out[p++] = ((c >> 6) & 63) | 128; 149     out[p++] = (c & 63) | 128; 150   } else { 151     out[p++] = (c >> 12) | 224; 152     out[p++] = ((c >> 6) & 63) | 128; 153     out[p++] = (c & 63) | 128; 154   } 155   return out; 156 }; 157   158   159 module.exports = FormData;