原生js实现文件上传

JavaScript013

原生js实现文件上传,第1张

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", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式，url，异步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data")

            xhr.onload = function () {

                var data = xhr.responseText    //得到返回值

                console.log(data)

            }

            xhr.send(formData)

        }

文件上传需要使用 拦截器 UseInterceptors 在'@nestjs/common'包内

拦截器功能参考: https://docs.nestjs.cn/7/interceptors

单文件上传

所需依赖有 FileInterceptor , UploadedFile

FileInterceptor 是拦截器负责处理请求接口后的文件 再使用UploadedFile 进行接受

多文件上传

所需依赖有 FilesInterceptor , UploadedFiles

基本操作与单文件上传一致 但注意依赖名不同,多文件上传有复数s

多文件上传自定义多个键名

所需依赖有 FileFieldsInterceptor , UploadedFiles

与上述操作基本不变 仅拦截方法变更,需要传入参数名数组

文件File分割 Blob/slice

Blob.slice() 方法用于创建一个包含源 Blob 的指定字节范围内的数据的新 Blob 对象。

参考文章

js文件上传进度显示

文件sha256的hash码获取

https://www.npmjs.com/package/crypto-js

2020-07-04