文件上传
文件上传接口在一般场景中是常见的需求。 通常通过 表单提交，或者 FormData 序列化请求体后Fetch， 实现上传文件到服务端。
如果是通过 表单提交，需要声明 enctype="multipart/form-data", 如果是通过 Fetch 或 ajax 上传，需要声明 header content-type 为 multipart/form-data。
html
<form action="/api/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple />
<input type="submit" value="submit">
</form><form action="/api/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple />
<input type="submit" value="submit">
</form>ts
const form = new FormData()
form.append('file', file)
fetch('/api/upload', {
method: 'POST',
headers: {
'Content-Type': '`multipart/form-data'
},
body: form
})const form = new FormData()
form.append('file', file)
fetch('/api/upload', {
method: 'POST',
headers: {
'Content-Type': '`multipart/form-data'
},
body: form
})在本插件中， 通过 formidable 对 content-type为 multipart/form-data 的请求进行解析处理。
在表单提交的数据字段中，如 表单字段 files, 解析后为 formidable.File 的对象类型，可用于获取上传的资源文件的相关信息：
如果 声明了 multiple 属性，则对应字段解析为 formidable.File[] 的数组。
ts
interface File {
/**
* The size of the uploaded file in bytes. If the file is still being uploaded (see `'fileBegin'`
* event), this property says how many bytes of the file have been written to disk yet.
*/
size: number
/**
* The path this file is being written to. You can modify this in the `'fileBegin'` event in case
* you are unhappy with the way formidable generates a temporary path for your files.
*/
filepath: string
/**
* The name this file had according to the uploading client.
*/
originalFilename: string | null
/**
* Calculated based on options provided
*/
newFilename: string
/**
* The mime type of this file, according to the uploading client.
*/
mimetype: string | null
/**
* A Date object (or `null`) containing the time this file was last written to. Mostly here for
* compatibility with the [W3C File API Draft](http://dev.w3.org/2006/webapi/FileAPI/).
*/
mtime?: Date | null | undefined
hashAlgorithm: false | 'sha1' | 'md5' | 'sha256'
/**
* If `options.hashAlgorithm` calculation was set, you can read the hex digest out of this var
* (at the end it will be a string).
*/
hash?: string | null
/**
* This method returns a JSON-representation of the file, allowing you to JSON.stringify() the
* file which is useful for logging and responding to requests.
*
* @link https://github.com/node-formidable/formidable#filetojson
*/
toJSON(): FileJSON
toString(): string
}interface File {
/**
* The size of the uploaded file in bytes. If the file is still being uploaded (see `'fileBegin'`
* event), this property says how many bytes of the file have been written to disk yet.
*/
size: number
/**
* The path this file is being written to. You can modify this in the `'fileBegin'` event in case
* you are unhappy with the way formidable generates a temporary path for your files.
*/
filepath: string
/**
* The name this file had according to the uploading client.
*/
originalFilename: string | null
/**
* Calculated based on options provided
*/
newFilename: string
/**
* The mime type of this file, according to the uploading client.
*/
mimetype: string | null
/**
* A Date object (or `null`) containing the time this file was last written to. Mostly here for
* compatibility with the [W3C File API Draft](http://dev.w3.org/2006/webapi/FileAPI/).
*/
mtime?: Date | null | undefined
hashAlgorithm: false | 'sha1' | 'md5' | 'sha256'
/**
* If `options.hashAlgorithm` calculation was set, you can read the hex digest out of this var
* (at the end it will be a string).
*/
hash?: string | null
/**
* This method returns a JSON-representation of the file, allowing you to JSON.stringify() the
* file which is useful for logging and responding to requests.
*
* @link https://github.com/node-formidable/formidable#filetojson
*/
toJSON(): FileJSON
toString(): string
}在mock 配置文件中, 可直接通过 req.body.* 获取相关的信息：
ts
export default defineMock({
url: '/api/upload',
method: 'POST',
body(req) {
const body = req.body
return {
files: body.files.map((file: any) => file.originalFilename),
}
},
})export default defineMock({
url: '/api/upload',
method: 'POST',
body(req) {
const body = req.body
return {
files: body.files.map((file: any) => file.originalFilename),
}
},
})