微信小程序怎样创建formdata对象，并通过 wx.request 发送file文件

作者：花生_TL007 | 2024-03-23 23:50:07

踩

一、场景

业务需求，微信小程序需要选择本地的一张照片file，通过接口发送给服务器。
问题：
因涉及到域名安全问题，不能使用 wx.uploadFile 。
微信本身没有FormData对象，无法使用 new FormData
后端接口需要接收一个file, 所以只能想办法，通过wx.request 发送 multipart/form-data 请求

二、解决办法（使用方法）

手动写一个formdata文件，然后引入。

参考微信社区、大神的github、整理了一下formdata.js 的用法。

request 请求：
需要文件的 tmp 地址： 大概这样 http://tmp/LGTNvurqcxlNd567041eac6dbc6f255c1a53109b65bf.jpg
formdata.js 文件
mimeMap 文件
1
2
3
4

import FormData from './FormData/index.js'

// 上传图片
export function uploadFile(newUrl){ // newUrl是本地文件的 tmp 地址 
  let formData = new FormData();

  // 用法
  // formData.append("name", "value");      // value 表单值
  // formData.appendFile("file", filepath); // filepath 文件路径
  formData.appendFile("multipartFile", newUrl);

  // formData.getData() => { 
  //   buffer:<ArrayBuffer>[], // buffer	表单数据的ArrayBuffer对象 
  //   contentType: string,    // http请求Content-Type头部内容
  // } 
  const data = formData.getData();

  return new Promise((resolve,reject)=>{
    wx.request({
      url:"https://xxxxx.xxxxxx.xxxxx/api/img/upload",
      method: 'POST',
      header: {
        'content-type': data.contentType
      },
      data: data.buffer,
      success(res) {
      	if(res.success) console.log("上传成功")
      }
    });
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

很简单对不对。
我的目录结构是这样的：
在这里插入图片描述

三、核心代码（你只需要赋值粘贴就可以了）

formdata.js

import mimeMap from './mimeMap'

function FormData(){
  let fileManager = wx.getFileSystemManager();
  let data = {};
  let files = [];

  this.append = (name, value)=>{
    data[name] = value;
    return true;
  }

  this.appendFile = (name, path)=>{
    let buffer = fileManager.readFileSync(path);
    if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){
      return false;
    }
    files.push({
      name: name,
      buffer: buffer,
      fileName: getFileNameFromPath(path)
    });
    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 = [];
  for (var i = 0; i < endBoundary.length; i++) { // 最后取出结束boundary的charCode
    endBoundaryArray.push(...endBoundary.utf8CodeAt(i));
  }
  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 = [];
  for (var i = 0; i < dataString.length; i++) { // 取出文本的charCode（10进制）
    dataArray.push(...dataString.utf8CodeAt(i));
  }

  if (isFile) {
    let fileArray = new Uint8Array(value);
    dataArray = dataArray.concat(Array.prototype.slice.call(fileArray));
  }
  dataArray.push(..."\r".utf8CodeAt());
  dataArray.push(..."\n".utf8CodeAt());

  return dataArray;
}

function getFileMime(fileName){
  let idx = fileName.lastIndexOf(".");
  let mime = mimeMap[fileName.substr(idx)];
  return mime?mime:"application/octet-stream"
}

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 Pair
    c = 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;
};


export default FormData;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

mimeMap.js

const mimeMap = {
  "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",
}
export default mimeMap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346

注意：因源码无法直接在项目中使用，本文代码在源码的基础上完善了一些改动。
如果本文代码无法满足您的需求，还请异步去看一下源码 github https://github.com/zlyboy/wx-formdata

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

微信小程序怎样创建formdata对象，并通过 wx.request 发送file文件

一、场景

二、解决办法（使用方法）

三、核心代码 （你只需要赋值粘贴就可以了）

三、核心代码（你只需要赋值粘贴就可以了）