devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Taro/react/微信小程序 无文件表单提交，兼容new FormData()方法_微信小程序使用formdata

作者：盐析白兔 | 2024-05-18 04:25:47

赞

踩

微信小程序使用formdata

1.难点：微信小程序环境中，接口类型为multipart/form-data;，但是又没有文件需要上传，Taro.uploadFile的filePath又不能为空，而微信小程序中又没有new FormData()

2.知识点：所以只能自己弄个new FormData()的方法了

3.将下面俩文件单独放一个地方，直接cv即可

4.如何使用。建议：如果有文件还是用自带的Taro.uploadFile

  1. const FormData = require('@//utils/form/formData.js'); // 先引进来
  2.  
  3.  
  4. // 然后正常用即可
  5. let formData = new FormData();
  6. let obj = {
  7.     name: '小柔柔',
  8.     age: '19',
  9.     sex: '男'
  10. }
  11.  
  12. for (let key in obj) {
  13. 	formData.append(key, obj[key]);
  14. }
  15. let data = formData.getData();
  16. return Taro.request({ // 这里用request
  17.     url: url,
  18.     data: data.buffer, // data已经给你分好值了，直接用即可
  19.     method: 'post',
  20.     timeout: 100000,
  21.     header: {
  22.         'Content-Type': data.contentType // // data已经给你分好值了，直接用即可
  23.     },
  24.     success: (res) => {
  25.         // 写成功后的逻辑
  26.     },
  27.     fail: (err) => {
  28.         // 写失败后的逻辑
  29.     }

mimeMap.js

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

formData.js

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/586646
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号