本文目录一览：
- 1、js如何上传文件
- 2、nestjs 文件上传
- 3、原生js实现文件上传
js如何上传文件
js采用File API 来上传文件的。
File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 input type=”file” … / 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。
File API 简单示例
body
h1File API Demo/h1
p
!-- 用于文件上传的表单元素 --
form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();"
pUpload File: input type="file" name="file" //p
pinput type="submit" value="Submit" //p
/form
divProgessing (in Bytes): span id="bytesRead"
/span / span id="bytesTotal"/span
/div
/p
/body
运行效果：
nestjs 文件上传
文件上传需要使用 拦截器 UseInterceptors 在'@nestjs/common'包内
拦截器功能参考:
单文件上传
所需依赖有 FileInterceptor , UploadedFile
FileInterceptor 是拦截器负责处理请求接口后的文件 再使用UploadedFile 进行接受
多文件上传
所需依赖有 FilesInterceptor , UploadedFiles
基本操作与单文件上传一致 但注意依赖名不同,多文件上传有复数s
多文件上传自定义多个键名
所需依赖有 FileFieldsInterceptor , UploadedFiles
与上述操作基本不变 仅拦截方法变更,需要传入参数名数组
原生js实现文件上传
function saveUser() {
var file = document.getElementById("file").files[0];
//原生ajax实现文件上传
var formData = new FormData();
if (file) {
formData.append("file", file);
console.log(file)
}
//得到xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", "", true);//设置提交方式，url，异步提交
// xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.onload = function () {
var data = xhr.responseText; //得到返回值
console.log(data);
}
xhr.send(formData);
}
