“Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去。
实现了 FormData 接口的对象可以直接在for...of(遍历属性值,for...in 则是遍历属性名)结构中使用,而不需要调用entries()返回可迭代对象(iterator) : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。方法、属性如下:
如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。
var myFile = new File(bits, name[, options])
; var file = new File(["foo"], "foo.txt", {
type: "text/plain",
});
首先创建一个a标签,href属性赋值为要下载文件对象的URL,然后调用a标签上的click()方法就可以下载file文件到本地了。
关于文件对象的URL怎么获得,这里要用到URL.createObjectURL(object)方法,参数object为一个File对象或者Blob对象,返回值就是一个UTF-16字符串,可以当作a标签的href属性值来使用。
注意:在使用完URL.createObjectURL()方法之后,要用URL.revokeObjectURL(url)来释放掉。
参数url为刚才生成的那个UTF-16字符串。详情参考https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
let file = new File([data], "fileName.obj");/*创建一个file文件*/
/*let blob = new Blob([data]);*/
/*download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性为下载后的文件名*/
let aTag = document.createElement('a');/*创建一个a标签*/
aTag.download = file.name;
let href = URL.createObjectURL(file);/*获取url*/
aTag.href = href;
aTag.click();
URL.revokeObjectURL(href);/*释放url*/
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
FileRaeader对象用于读取本地的文件:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。参数为用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
serialize(),序列表表格内容为字符串。
serializeArray(),序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)
上传的图片大小检测
let nImg = new Image();
nImg.src=URL.createObjectURL(file.data);
nImg.onload=function (){
if(this.width>1440 || this.width>1080){
layer.msg("图片宽度最大分辨率不能超过1440x1080!",{time:3000},function (){
uppy.removeFile(file.id); /*删除选项*/
});
}
}
web请求php执行时间受到2方面控制,一个是php.ini的max_execution_time(要注意的是sleep,http请求等待响应的时间是不算的,这里算的是真正的执行时间),另一个是php-fpm request_terminate_timeout 设置,这个算的是请求开始n秒。
file_uploads on 是否允许通过HTTP上传文件的开关。默认为ON即是开 upload_tmp_dir – 文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹 upload_max_filesize 8m 望文生意,即允许上传文件大小的最大值。默认为2M post_max_size 8m 指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值。默认为8M max_execution_time 600 每个PHP页面运行的最大时间值(秒),默认30秒 max_input_time 600 每个PHP页面接收数据所需的最大时间,默认60秒 memory_limit 8m 每个PHP页面所吃掉的最大内存,默认8M
可以选择在http{ }中设置:client_max_body_size 20m; 也可以选择在server{ }中设置:client_max_body_size 20m; 还可以选择在location{ }中设置:client_max_body_size 20m; 三者有区别 设置到http{}内,控制全局nginx所有请求报文大小 设置到server{}内,控制该server的所有请求报文大小 设置到location{}内,控制满足该路由规则的请求报文大小
send_timeout 60; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300;
实际上传不受 keepalive_timeout 时间影响,和该项配置无关,而且这个时间加长会严重影响 nginx 的并发
send_timeout , 客户端上传时网络断流后超过 60s 则停止接收接收操作,中断连接。只要持续发送数据则不会断掉
修改客户端执行上传时,限制的超时时间。
UNIAPP部分
"networkTimeout" : { "request" : 3600000, "uploadFile" : 3600000, "downloadFile" : 3600000 }
Mozilla:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/upload
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有