js文件上传(nodejs文件上传)

js input file文件上传图片并展示

? ??1 页面HTML内容

????2 获取input[file]元素 ? ?

????3 对获取的file元素操作，也就是操作fileReader属性 ? ?

1：Blob

2:? File

3:? FileList

4:? FileReader

FileList ：

这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名; size ; type 文件类型; lastModified 最后修改时间；

FileReader：异步读取本地文件内容；包括File 和Blob ；

? ? 创建FileReader对象;读取file文件

关于fileReader的几个属性：

FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：

FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。

fileReader的几个事件处理程序：

1 . FileReader.onbort:在读取操作中止时触发。

2 . FileReader.onerror:在读取操作遇到错误时触发。

3 . FileReader.onload:在读取操作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法：

1 . FileReader.abort();中止读取操作

2 . FileReader.readAsArrayBuffer();完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString();完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL();完成时result属性包含data：表示文本数据的URL；

5 . FileReader.readAsText();完成时result属性包含文本的内容作为文本字符串。

js文件上传中遇到的知识点

在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。

本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。

本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。

FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。

input 标签，将type设为file，之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于操作二进制文件，arraybuffer用于操作内存。

blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行操作，下面是操作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接，

FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有：

cavas压缩图片其实很简单，无非就是几个步骤：

1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；

2、用FileReader对象读取文件成base64,

3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；

4、将cavas转成blob，拼在formdata中用ajax上传。

这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。

如何通过js完成多个文件的上传

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件

HTML5 页面代码修改后

img width="400" height="250"/br /

input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/

input type="button" value="上传图片" onclick="uploadFile()" /br /

div id="parent"

div id="son"/div

/div

accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。

如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码

function printFileInfo(){

var picFile = document.getElementById("pic");

var files = picFile.files;

for(var i=0; ifiles.length; i++){

var file = files[i];

var div = document.createElement("div")

div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +

" , 文件类型："+ file.type +" , 文件大小:"+ file.size

document.body.appendChild( div)

}

}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的

var xhr = new XMLHttpRequest()

2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件

error：在请求发生错误时触发。

对应上传时发生错误导致的上传失败：uploadFailed()

//上传失败

function uploadFailed(evt) {

alert("上传失败");

}

progress：在接收相应期间持续不断触发。

对应上传进度方法：onprogress()

/**

* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

*/

function onprogress(evt){

var loaded = evt.loaded; //已经上传大小情况

var tot = evt.total; //附件总大小

var per = Math.floor(100*loaded/tot); //已经上传的百分比

$("#son").html( per +"%" );

$("#son").css("width" , per +"%");

}

最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。

//上传文件

function uploadFile() {

//将上传的多个文件放入formData中

var picFileList = $("#pic").get(0).files;

var formData = new FormData();

for(var i=0; i picFileList.length; i++){

formData.append("file" , picFileList[i] );

}

//监听事件

xhr.upload.addEventListener("progress", onprogress, false);

xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数

xhr.open("POST", "upload");

//记得加入上传数据formData

xhr.send(formData);

}

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);

? ? ? ? }