技術文章 » 微信小程式介面請求/form-data/單檔案、多檔案上傳

微信小程式介面請求/form-data/單檔案、多檔案上傳

2022-07-13 06:00:38

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:'\r\n--XXX' +
 8     '\r\nContent-Disposition: form-data; name="key1"' +      //第一個引數key1:val1,固定寫法以此類推
 9     '\r\n' +
10     '\r\n' + val1 +
11     '\r\n--XXX' +
12     '\r\nContent-Disposition: form-data; name="key2"' +
13     '\r\n' +
14     '\r\n' + val2 +
15     '\r\n--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 + '\r\n';
 91   dataString += 'Content-Disposition: form-data; name="' + name + '"';
 92   if (isFile){
 93     dataString += '; filename="' + fileName + '"' + '\r\n';
 94     dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n';
 95   }
 96   else{
 97     dataString += '\r\n\r\n';
 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;