- A+
所属分类：Web前端
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 }
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;
