微信小程序 | 如何使用wx.request发送文件？

微信小程序不提供fromdata对象，以至于提交的表单里面没有办法包含文件，只能提交表单里面的文本字段，找了一下发现有大佬造好了轮子：

https://github.com/zlyboy/wx-formdatahttps://github.com/zlyboy/wx-formdata下面简单说下使用方法：

有三个文件需要复制

// 文件package.json 放入小程序根目录里面{"name": "@zlyboy/wx-formdata","version": "1.0.2","description": "在微信小程序中使用formdata上传数据，可实现多文件上传","main": "formData.js","author": "zlyboy","bugs": {"url": "https://github.com/zlyboy/wx-formdata/issues"},"homepage": "https://github.com/zlyboy/wx-formdata#readme","keywords": ["小程序"],"license": "MIT","repository": {"type": "git","url": "git+https://github.com/zlyboy/wx-formdata.git"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"}
}

//文件mimeMap.js 也是放进utils文件夹
module.exports = {"0.001": "application/x-001","0.323": "text/h323","0.907": "drawing/907",".acp": "audio/x-mei-aac",".aif": "audio/aiff",".aiff": "audio/aiff",".asa": "text/asa",".asp": "text/asp",".au": "audio/basic",".awf": "application/vnd.adobe.workflow",".bmp": "application/x-bmp",".c4t": "application/x-c4t",".cal": "application/x-cals",".cdf": "application/x-netcdf",".cel": "application/x-cel",".cg4": "application/x-g4",".cit": "application/x-cit",".cml": "text/xml",".cmx": "application/x-cmx",".crl": "application/pkix-crl",".csi": "application/x-csi",".cut": "application/x-cut",".dbm": "application/x-dbm",".dcd": "text/xml",".der": "application/x-x509-ca-cert",".dib": "application/x-dib",".doc": "application/msword",".drw": "application/x-drw",".dwf": "Model/vnd.dwf",".dwg": "application/x-dwg",".dxf": "application/x-dxf",".emf": "application/x-emf",".ent": "text/xml",".eps": "application/x-ps",".etd": "application/x-ebx",".fax": "image/fax",".fif": "application/fractals",".frm": "application/x-frm",".gbr": "application/x-gbr",".gif": "image/gif",".gp4": "application/x-gp4",".hmr": "application/x-hmr",".hpl": "application/x-hpl",".hrf": "application/x-hrf",".htc": "text/x-component",".html": "text/html",".htx": "text/html",".ico": "image/x-icon",".iff": "application/x-iff",".igs": "application/x-igs",".img": "application/x-img",".isp": "application/x-internet-signup",".java": "java/*",".jpe": "image/jpeg",".jpeg": "image/jpeg",".jpg": "application/x-jpg",".jsp": "text/html",".lar": "application/x-laplayer-reg",".lavs": "audio/x-liquid-secure",".lmsff": "audio/x-la-lms",".ltr": "application/x-ltr",".m2v": "video/x-mpeg",".m4e": "video/mpeg4",".man": "application/x-troff-man",".mdb": "application/msaccess",".mfp": "application/x-shockwave-flash",".mhtml": "message/rfc822",".mid": "audio/mid",".mil": "application/x-mil",".mnd": "audio/x-musicnet-download",".mocha": "application/x-javascript",".mp1": "audio/mp1",".mp2v": "video/mpeg",".mp4": "video/mpeg4",".mpd": "application/vnd.ms-project",".mpeg": "video/mpg",".mpga": "audio/rn-mpeg",".mps": "video/x-mpeg",".mpv": "video/mpg",".mpw": "application/vnd.ms-project",".mtx": "text/xml",".net": "image/pnetvue",".nws": "message/rfc822",".out": "application/x-out",".p12": "application/x-pkcs12",".p7c": "application/pkcs7-mime",".p7r": "application/x-pkcs7-certreqresp",".pc5": "application/x-pc5",".pcl": "application/x-pcl",".pdf": "application/pdf",".pdx": "application/vnd.adobe.pdx",".pgl": "application/x-pgl",".pko": "application/vnd.ms-pki.pko",".plg": "text/html",".plt": "application/x-plt",".png": "application/x-png",".ppa": "application/vnd.ms-powerpoint",".pps": "application/vnd.ms-powerpoint",".ppt": "application/x-ppt",".prf": "application/pics-rules",".prt": "application/x-prt",".ps": "application/postscript",".pwz": "application/vnd.ms-powerpoint",".ra": "audio/vnd.rn-realaudio",".ras": "application/x-ras",".rdf": "text/xml",".red": "application/x-red",".rjs": "application/vnd.rn-realsystem-rjs",".rlc": "application/x-rlc",".rm": "application/vnd.rn-realmedia",".rmi": "audio/mid",".rmm": "audio/x-pn-realaudio",".rms": "application/vnd.rn-realmedia-secure",".rmx": "application/vnd.rn-realsystem-rmx",".rp": "image/vnd.rn-realpix",".rsml": "application/vnd.rn-rsml",".rtf": "application/msword",".rv": "video/vnd.rn-realvideo",".sat": "application/x-sat",".sdw": "application/x-sdw",".slb": "application/x-slb",".slk": "drawing/x-slk",".smil": "application/smil",".snd": "audio/basic",".sor": "text/plain",".spl": "application/futuresplash",".ssm": "application/streamingmedia",".stl": "application/vnd.ms-pki.stl",".sty": "application/x-sty",".swf": "application/x-shockwave-flash",".tg4": "application/x-tg4",".tif": "image/tiff",".tiff": "image/tiff",".top": "drawing/x-top",".tsd": "text/xml",".uin": "application/x-icq",".vcf": "text/x-vcard",".vdx": "application/vnd.visio",".vpg": "application/x-vpeg005",".vsd": "application/x-vsd",".vst": "application/vnd.visio",".vsw": "application/vnd.visio",".vtx": "application/vnd.visio",".wav": "audio/wav",".wb1": "application/x-wb1",".wb3": "application/x-wb3",".wiz": "application/msword",".wk4": "application/x-wk4",".wks": "application/x-wks",".wma": "audio/x-ms-wma",".wmf": "application/x-wmf",".wmv": "video/x-ms-wmv",".wmz": "application/x-ms-wmz",".wpd": "application/x-wpd",".wpl": "application/vnd.ms-wpl",".wr1": "application/x-wr1",".wrk": "application/x-wrk",".ws2": "application/x-ws",".wsdl": "text/xml",".xdp": "application/vnd.adobe.xdp",".xfd": "application/vnd.adobe.xfd",".xhtml": "text/html",".xls": "application/x-xls",".xml": "text/xml",".xq": "text/xml",".xquery": "text/xml",".xsl": "text/xml",".xwd": "application/x-xwd",".sis": "application/vnd.symbian.install",".x_t": "application/x-x_t",".apk": "application/vnd.android.package-archive","0.301": "application/x-301","0.906": "application/x-906",".a11": "application/x-a11",".ai": "application/postscript",".aifc": "audio/aiff",".anv": "application/x-anv",".asf": "video/x-ms-asf",".asx": "video/x-ms-asf",".avi": "video/avi",".biz": "text/xml",".bot": "application/x-bot",".c90": "application/x-c90",".cat": "application/vnd.ms-pki.seccat",".cdr": "application/x-cdr",".cer": "application/x-x509-ca-cert",".cgm": "application/x-cgm",".class": "java/*",".cmp": "application/x-cmp",".cot": "application/x-cot",".crt": "application/x-x509-ca-cert",".css": "text/css",".dbf": "application/x-dbf",".dbx": "application/x-dbx",".dcx": "application/x-dcx",".dgn": "application/x-dgn",".dll": "application/x-msdownload",".dot": "application/msword",".dtd": "text/xml",".dwf": "application/x-dwf",".dxb": "application/x-dxb",".edn": "application/vnd.adobe.edn",".eml": "message/rfc822",".epi": "application/x-epi",".eps": "application/postscript",".exe": "application/x-msdownload",".fdf": "application/vnd.fdf",".fo": "text/xml",".g4": "application/x-g4",".tif": "image/tiff",".gl2": "application/x-gl2",".hgl": "application/x-hgl",".hpg": "application/x-hpgl",".hqx": "application/mac-binhex40",".hta": "application/hta",".htm": "text/html",".htt": "text/webviewhtml",".icb": "application/x-icb",".ico": "application/x-ico",".ig4": "application/x-g4",".iii": "application/x-iphone",".ins": "application/x-internet-signup",".IVF": "video/x-ivf",".jfif": "image/jpeg",".jpe": "application/x-jpe",".jpg": "image/jpeg",".js": "application/x-javascript",".la1": "audio/x-liquid-file",".latex": "application/x-latex",".lbm": "application/x-lbm",".ls": "application/x-javascript",".m1v": "video/x-mpeg",".m3u": "audio/mpegurl",".mac": "application/x-mac",".math": "text/xml",".mdb": "application/x-mdb",".mht": "message/rfc822",".mi": "application/x-mi",".midi": "audio/mid",".mml": "text/xml",".mns": "audio/x-musicnet-stream",".movie": "video/x-sgi-movie",".mp2": "audio/mp2",".mp3": "audio/mp3",".mpa": "video/x-mpg",".mpe": "video/x-mpeg",".mpg": "video/mpg",".mpp": "application/vnd.ms-project",".mpt": "application/vnd.ms-project",".mpv2": "video/mpeg",".mpx": "application/vnd.ms-project",".mxp": "application/x-mmxp",".nrf": "application/x-nrf",".odc": "text/x-ms-odc",".p10": "application/pkcs10",".p7b": "application/x-pkcs7-certificates",".p7m": "application/pkcs7-mime",".p7s": "application/pkcs7-signature",".pci": "application/x-pci",".pcx": "application/x-pcx",".pdf": "application/pdf",".pfx": "application/x-pkcs12",".pic": "application/x-pic",".pl": "application/x-perl",".pls": "audio/scpls",".png": "image/png",".pot": "application/vnd.ms-powerpoint",".ppm": "application/x-ppm",".ppt": "application/vnd.ms-powerpoint",".pr": "application/x-pr",".prn": "application/x-prn",".ps": "application/x-ps",".ptn": "application/x-ptn",".r3t": "text/vnd.rn-realtext3d",".ram": "audio/x-pn-realaudio",".rat": "application/rat-file",".rec": "application/vnd.rn-recording",".rgb": "application/x-rgb",".rjt": "application/vnd.rn-realsystem-rjt",".rle": "application/x-rle",".rmf": "application/vnd.adobe.rmf",".rmj": "application/vnd.rn-realsystem-rmj",".rmp": "application/vnd.rn-rn_music_package",".rmvb": "application/vnd.rn-realmedia-vbr",".rnx": "application/vnd.rn-realplayer",".rpm": "audio/x-pn-realaudio-plugin",".rt": "text/vnd.rn-realtext",".rtf": "application/x-rtf",".sam": "application/x-sam",".sdp": "application/sdp",".sit": "application/x-stuffit",".sld": "application/x-sld",".smi": "application/smil",".smk": "application/x-smk",".sol": "text/plain",".spc": "application/x-pkcs7-certificates",".spp": "text/xml",".sst": "application/vnd.ms-pki.certstore",".stm": "text/html",".svg": "text/xml",".tdf": "application/x-tdf",".tga": "application/x-tga",".tif": "application/x-tif",".tld": "text/xml",".torrent": "application/x-bittorrent",".txt": "text/plain",".uls": "text/iuls",".vda": "application/x-vda",".vml": "text/xml",".vsd": "application/vnd.visio",".vss": "application/vnd.visio",".vst": "application/x-vst",".vsx": "application/vnd.visio",".vxml": "text/xml",".wax": "audio/x-ms-wax",".wb2": "application/x-wb2",".wbmp": "image/vnd.wap.wbmp",".wk3": "application/x-wk3",".wkq": "application/x-wkq",".wm": "video/x-ms-wm",".wmd": "application/x-ms-wmd",".wml": "text/vnd.wap.wml",".wmx": "video/x-ms-wmx",".wp6": "application/x-wp6",".wpg": "application/x-wpg",".wq1": "application/x-wq1",".wri": "application/x-wri",".ws": "application/x-ws",".wsc": "text/scriptlet",".wvx": "video/x-ms-wvx",".xdr": "text/xml",".xfdf": "application/vnd.adobe.xfdf",".xls": "application/vnd.ms-excel",".xlw": "application/x-xlw",".xpl": "audio/scpls",".xql": "text/xml",".xsd": "text/xml",".xslt": "text/xml",".x_b": "application/x-x_b",".sisx": "application/vnd.symbian.install",".ipa": "application/vnd.iphone",".xap": "application/x-silverlight-app",".zip": "application/x-zip-compressed",
}

// 文件 formData.js 放进utils文件夹
const mimeMap = require('./mimeMap.js')function FormData(){let fileManager = wx.getFileSystemManager();let data = {};let files = [];this.append = (name, value)=>{data[name] = value;return true;}this.appendFile = (name, path, fileName)=>{let buffer = fileManager.readFileSync(path);if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){return false;}if(!fileName){fileName = getFileNameFromPath(path);}files.push({name: name,buffer: buffer,fileName: fileName});return true;}this.getData = ()=>convert(data, files)
}function getFileNameFromPath(path){let idx=path.lastIndexOf("/");return path.substr(idx+1);
}function convert(data, files){let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符，一般是随机的字符串let boundary = '--' + boundaryKey;let endBoundary = boundary + '--';let postArray = [];//拼接参数if(data && Object.prototype.toString.call(data) == "[object Object]"){for(let key in data){postArray = postArray.concat(formDataArray(boundary, key, data[key]));}}//拼接文件if(files && Object.prototype.toString.call(files) == "[object Array]"){for(let i in files){let file = files[i];postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName));}}//结尾let endBoundaryArray = [];endBoundaryArray.push(...endBoundary.toUtf8Bytes());postArray = postArray.concat(endBoundaryArray);return {contentType: 'multipart/form-data; boundary=' + boundaryKey,buffer: new Uint8Array(postArray).buffer}
}function randString() {let res = "";for (let i = 0; i < 17; i++) {let n = parseInt(Math.random() * 62);if (n <= 9) {res += n;}else if (n <= 35) {res += String.fromCharCode(n + 55);}else {res += String.fromCharCode(n + 61);}}return res;
}function formDataArray(boundary, name, value, fileName){let dataString = '';let isFile = !!fileName;dataString += boundary + '\r\n';dataString += 'Content-Disposition: form-data; name="' + name + '"';if (isFile){dataString += '; filename="' + fileName + '"' + '\r\n';dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n';}else{dataString += '\r\n\r\n';dataString += value;}var dataArray = [];dataArray.push(...dataString.toUtf8Bytes());if (isFile) {let fileArray = new Uint8Array(value);dataArray = dataArray.concat(Array.prototype.slice.call(fileArray));}dataArray.push(..."\r".toUtf8Bytes());dataArray.push(..."\n".toUtf8Bytes());return dataArray;
}function getFileMime(fileName){let idx = fileName.lastIndexOf(".");let mime = mimeMap[fileName.substr(idx)];return mime?mime:"application/octet-stream"
}String.prototype.toUtf8Bytes = function(){var str = this;var bytes = [];for (var i = 0; i < str.length; i++) {bytes.push(...str.utf8CodeAt(i));if (str.codePointAt(i) > 0xffff) {i++;}}return bytes;
}String.prototype.utf8CodeAt = function(i) {var str = this;var out = [], p = 0;var c = str.charCodeAt(i);if (c < 128) {out[p++] = c;} else if (c < 2048) {out[p++] = (c >> 6) | 192;out[p++] = (c & 63) | 128;} else if (((c & 0xFC00) == 0xD800) && (i + 1) < str.length &&((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) {// Surrogate Pairc = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF);out[p++] = (c >> 18) | 240;out[p++] = ((c >> 12) & 63) | 128;out[p++] = ((c >> 6) & 63) | 128;out[p++] = (c & 63) | 128;} else {out[p++] = (c >> 12) | 224;out[p++] = ((c >> 6) & 63) | 128;out[p++] = (c & 63) | 128;}return out;
};module.exports = FormData;

三个文件放好之后，在你要提交表单的地方：

const FormData = require('../../utils/formData.js')//引入这个文件
let formData = new FormData();//实例化formData
formData.append("username", "xxx");//文本字段
formData.append("passwd", "xxx");
formData.appendFile("file", res.tempVideoPath, "capture.webm");//文件字段
let data = formData.getData();//组合成datawx.request({//请求函数url: "http://x.x.x.x:x/api", //接口地址method: 'POST',// 请求方式data: data.buffer, //数据字段header: {'content-type':data.contentType //请求头},success: (res) => {},fail: function(error) {wx.showToast({title: error.message || '请求失败'})console.log(error)}
})

简单好用！

微信小程序 | 如何使用wx.request发送文件？相关推荐

记录毕设做小程序的坑（微信小程序体验版wx.request无法获取用户的openid）
毕设想做一个微信小程序,在体验版进行测试时发现,用户登录时不能把用户的信息存储到云数据库中,我当时真的谢了.测试了一下发现是wx.request获取不到openid了,因为我写的是获取到openid之 ...
微信小程序苹果手机 https wx.request 不反应
问题状况:微信小程序,安卓手机访问是正常的,可是苹果手机却不能访问. 问题排查:用苹果手机进入调试模块看输入结果,发现每次都停在request begin这里,后台也无法获取到前台传送过来的数据,所以 ...
微信小程序--后台交互/wx.request({})方法/渲染页面方法解析
小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
微信小程序在使用wx.request时显示加载中
我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.j ...
小程序不支持wx.request同步请求解决方法
小程序不支持wx.request同步请求解决方法参考文章: (1)小程序不支持wx.request同步请求解决方法 (2)https://www.cnblogs.com/bainiu/p/77038 ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
php7 mysql json 小程序_微信小程序php传递post请求发送json数据以获取小程序码
困扰了两天的问题终于解决了! 用php传递post请求,发送json数据到微信小程序提供的接口,以此获得微信小程序码,下面是代码展示:<?php //需要传递的json数据 //能传递的参数,详 ...
微信小程序-bug-调用wx.login()无响应的原因和解决方案
微信小程序-bug-调用wx.login()无响应的原因和解决方案参考文章: (1)微信小程序-bug-调用wx.login()无响应的原因和解决方案 (2)https://www.cnblogs. ...

微信小程序 | 如何使用wx.request发送文件？

微信小程序 | 如何使用wx.request发送文件？相关推荐

最新文章

热门文章