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

javascript 文章 2022-07-15 14:28 0 全屏看文

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:reject12     })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     functionName14 }

在需要使用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": "messagefc822", 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": "audion-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": "messagefc822", 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": "messagefc822",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": "messagefc822",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/v        
-EOF-