formData实现图片上传
前言
在 上一篇 已经实现了图片预览,那么如何上传图片呢?有两种思路:
1、将图片转化为dataURL(base64),这样就成为了一串字符串,再传到服务端。不过这样缺点很多,数据量比转换之前增加1/3,而且会增加了存储开销(如果存在数据库,就多了访问数据库;如果解析成图片再存储,就多了解析的开销)。所以这样方式不可取。
2、使用formData对象进行上传。
FormData对象
先看MDN上对FormData对象的介绍:XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件 。
构造formData
//
var formData = new FormData(formDOM); //
var formData = new FormData();
formData.append(name , value , fileName)
在上篇的例子中,创建input的formData对象
var fileInput = document.querySelector('.input-file');
var files = fileInput.files var formData = new FormData(); //创建formData对象 //判断数据 若有 则添加数据
if(files.length > ){
[].slice.call(files).forEach(function(value,index){
formData.append('img' + index,value,value.name) //遍历添加数据
})
}else {
alert('请先选择图片');
return false;
}
注意:查看formData对象数据需要用get()或者getAll()方法,直接打印出来是{}的。
弄好了formData对象,再XMLHttpRequest提交到服务端,这里先写一个最简单的上传图片的接口。node小白,请不要吐槽这个粗糙到极致的接口,只是为了测试上传而已。
formidable = require('formidable'); //载入formidable
var express = require('express');
var app = express(); app.use(express.static('src',{ // 静态资源中间件
setHeaders : function(res,path,stat){
res.setHeader('Cache-Control', 'max-age=' + 6000);
}
})); app.post('/upload',function(req,res){
var form = new formidable.IncomingForm();
form.encoding = 'utf-8';
form.uploadDir = './src/images';
form.keepExtensions = true; form.parse(req,function(err,field,files){
console.log(files);
});
res.send({
'msg':'upload file'
});
}); var server = app.listen(8081, function(){
console.log('服务器已启动!');
});
上传
1、原生上传
此时的 Content-Type应该为multipart/form-data,原生方式的时候不需要添加也可以,浏览器会自动完成。
var httpDemo = new XMLHttpRequest(); //创建httprequest对象 httpDemo.open('post','/upload',true); //初始化请求 post方式 接口 异步
httpDemo.onload = function(e){
console.log(e);
} httpDemo.send(formData); //发送请求
查看效果,选择的图片已成功上传到指定的目录。
2、$.ajax()
使用jquery上传有两个配置需要注意:
processData会默认将data转化为字符串,所以需要配置为false,不进行处理。
contentType默认值为application/x-www-form-urlencoded; charset=UTF-8'。上传文件时,Content-Type应该为multipart/form-data。但是设置为multipart/form-data也还是会失败。只有设置为false才可以。
$.ajax({
url : '/upload',
type:'POST',
data: formData,
processData:false,
contentType:false,
success:function(data,textStatus,jqXHR){ },
error:function(jqXHR,textStatus,error){ }
})
查看效果,依旧可以上传成功。
3、vue-axios上传
只需要配置header即可。
headers: {
'Content-Type': 'multipart/form-data'
},
formData实现图片上传的更多相关文章
- (转)React Native 使用react-native-image-picker库实现图片上传功能
react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装 ...
- 项目回顾3-再谈图片上传-FormData+ajax上传
上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...
- base64格式图片转换为FormData对象进行上传
原理:理由ArrayBuffer.Blob和FormData var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为byte va ...
- Formdata 图片上传 Ajax
/*图片上传*/ $("点击对象").bind("click", function(e){ $('#form-upload').remove(); $('bod ...
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- 图片上传前预览、压缩、转blob、转formData等操作
直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...
- ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- 页面表单里的图片上传ENCTYPE="multipart/form-data"
ENCTYPE="multipart/form-data"用于表单里有图片上传. <form action="<%=basePath %>asyUplo ...
随机推荐
- Android Annotations(1)
特性: Android Annotations是一个开源的框架,用于加速 Android应用的开发,可以让你把重点放在功能的实现上,简化了代码,提升了可维护性. 特性: 依赖注入: inject ...
- Java常见异常处理
Exception类: 在java中用类的形式对不正常情况进行了描述和封装对象,异常就是java通过面向对象的思想将问题封装成了对象. 异常发生的原因有很多,通常包含以下几大类: 用户输入了非法数据. ...
- YYHS-NOIP模拟赛-gcd
题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...
- struts2使用模型传值
用户bean package userBeans; public class User { private String username; public String getUsername() { ...
- 在MVC中使用rdlc格式的报表
前言 近期,在公司做的项目中做到报表模块需要使用rdlc格式的报表,这个报表需要使用WebForm来加载,但是现在用ASP.NET做项目基本上都是MVC.由于以前没有使用过,因此记录下来,供以后查阅. ...
- python异步并发模块concurrent.futures入门详解
concurrent.futures是一个非常简单易用的库,主要用来实现多线程和多进程的异步并发. 本文主要对concurrent.futures库相关模块进行详解,并分别提供了详细的示例demo. ...
- LeetCode 33. Search in Rotated Sorted Array(在旋转有序序列中搜索)
Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...
- WinForm 菜单控件
一:MenuStrip 菜单条 MenuStrip 是应用程序菜单条的容器. 二:ToolStripMenuItem 像上面图中, 文件 格式 等这些菜单当中的一级菜单以及文件中的 新建 打开 分割条 ...
- 疑似CPU或者内存故障导致进程崩溃
我们有一个服务跑在微软云的所有宿主机上.最近发现某一台机器上该服务进程持续崩溃.崩溃原因是访问了一个无效指针,对应的代码如下 serviceListIniBuffer.AppendF("Se ...
- Python中的输出
1.Python的输出语句 Python输出语句是print,但是python2.x与3.x又有点区别.python2.x输出 print "xxx"能成功执行,而3.x不行,所以 ...