js上传文件(js上传图片)
nestjs 文件上传
文件上传需要使用 拦截器 UseInterceptors 在'@nestjs/common'包内
拦截器功能参考:
单文件上传
所需依赖有 FileInterceptor , UploadedFile
FileInterceptor 是拦截器负责处理请求接口后的文件 再使用UploadedFile 进行接受
多文件上传
所需依赖有 FilesInterceptor , UploadedFiles
基本操作与单文件上传一致 但注意依赖名不同,多文件上传有复数s
多文件上传自定义多个键名
所需依赖有 FileFieldsInterceptor , UploadedFiles
与上述操作基本不变 仅拦截方法变更,需要传入参数名数组
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实现的动态多文件上传
方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
p
a href='#' onclick='javascript:viewnone(more1)' 添加附件 /a
div id='more1' style='display:none'
input type="file" name="attach1" size="50"javascript:viewnone(more2)
/span
/div
div id='more2' style='display:none'
input type="file" name="attach2" size="50"'
/div
/p
js
SCRIPT language="javascript"
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
/script
方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
html
input type="button" name="button" value="添加附件" onclick="addInput()"
input type="button" name="button" value="删除附件" onclick="deleteInput()"
span id="upload"/span
js
script type="text/javascript"
var attachname = "attach";
var i=1;
function addInput(){
if(i0){
var attach = attachname + i ;
if(createInput(attach))
i=i+1;
}
}
function deleteInput(){
if(i1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
function createInput(nm){
var aElement=document.createElement("input");
aElement.name=nm;
aElement.id=nm;
aElement.type="file";
aElement.size="50";
//aElement.value="thanks";
//aElement.onclick=Function("asdf()");
if(document.getElementById("upload").appendChild(aElement) == null)
return false;
return true;
}
function removeInput(nm){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null)
return false;
return true;
}
/script
方式三：动态多文件上传，只是在oFileInput.click();这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！
另外还有一点就是说，click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。
html
A href="javascript:newUpload();"添加附件/A
TABLE width="100%" border="0" cellpadding="0" cellspacing="1"
TBODY id="fileList"/TBODY
/TABLE
DIV id="uploadFiles" style="display:block"/DIV
js
SCRIPT language="javascript"
//---新建上传
function newUpload(){
var oFileList = document.getElementById("fileList");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput)){
addFile(oFileInput);
}
}
//----选择文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做，可能是为了安全着想吧！
var fileValue = oFileInput.value;
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput);
return false;
}
else
return true;
}
//---新建一个文件显示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList");
var fileIndex = oFileList.childNodes.length + 1;
var oTR = document.createElement("TR");
var oTD1 = document.createElement("TD");
var oTD2 = document.createElement("TD");
oTR.setAttribute("id","file_" + fileIndex);
oTR.setAttribute("bgcolor","#FFFFFF");
oTD1.setAttribute("width","6%");
oTD2.setAttribute("width","94%");
oTD2.setAttribute("align","left");
oTD2.innerText = oFileInput.value;
oTD1.innerHTML = 'A href="javascript:removeFile('+ fileIndex + ');"删除/A';
oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
oFileList.appendChild(oTR);
}
//---移除上传的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex);
var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
fileList.removeChild(oTR);
}
//---创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("INPUT");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
//oFileInput.setAttribute("id",_name);
//oFileInput.setAttribute("name",_name);
//oFileInput.outerHTML = 'INPUT type=file id=' + _name + ' name=' + _name + '';
//alert(oFileInput.outerHTML);
return oFileInput;
}
/SCRIPT
egg.js 文件上传
小文件的话就不需要使用文件流了
需要在config.default.ts(egg.js修改默认配置的文件)指定文件的限制
一般来说超过1mb的文件，在上传的时候最好以流的形式去处理
egg.js中也提供的这类的插件
同样的需要修config.default.ts文件，去限制文件的最大长度，如果不限制的话会默认是100kb的，这个要注意
原生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);
? ? ? ? }
如何从js文件上传问题，怎么解决
1
第一步：新建HTML文件
使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。如图：
步骤阅读
2
第二步：写入html页面代码文件
在dreamweaver中输入以下页面代码：
table width="958"
tr
tdpre style="height:2px" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?a href=""文件上传/a首页 ?/td
/tr
/table
h1nbsp;a href="" class="STYLE9"文件上传/aspan class="STYLE7"文件上传/span/h1
pnbsp;/p
div style="width:180px; height:950px; float:left; border: #55AAFF 1px solid"
p文件上传 ?/p
br /
p上传图片/p
form action="doUpload.jsp" method="post" ?name="form1" enctype="multipart/form-data"
!-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传。--
input type="file" name="upfile" size="15"
input type="submit" value="确定"
/form/div
注意，这段代码请放在body标签之类。如图：
3
第三步：写入css样式代码
在head标签之类输入以下样式代码：
style type="text/css"
!--
.STYLE1 {color: #3399FF}
.STYLE7 { font-size: 16px;
font-weight: bold;
}
.STYLE9 {font-family: "华文彩云";
font-size: 48px;
color: #FF0000;
}
.STYLE11 {
font-size: 16px;
color: #FF3300;
}
--
/style
用以固定页面样式。如图：
4
第四步：检测页面样式
用浏览器打开html文件，查看页面样式，然后做修改调整。如图：
5
第五步：选择文件
点击页面左边的选择文件按钮，选中桌面文件，然后点击打开，在页面上会显示文件名称，如图：
6
第六步：上传文件
点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。如图：