前言

  在 上一篇 已经实现了图片预览,那么如何上传图片呢?有两种思路:

  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实现图片上传的更多相关文章

  1. (转)React Native 使用react-native-image-picker库实现图片上传功能

    react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装 ...

  2. 项目回顾3-再谈图片上传-FormData+ajax上传

    上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...

  3. base64格式图片转换为FormData对象进行上传

    原理:理由ArrayBuffer.Blob和FormData var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为byte va ...

  4. Formdata 图片上传 Ajax

    /*图片上传*/ $("点击对象").bind("click", function(e){ $('#form-upload').remove(); $('bod ...

  5. ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

  6. 图片上传前预览、压缩、转blob、转formData等操作

    直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...

  7. ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小

    之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...

  8. 使用FormData数据做图片上传: new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  9. 页面表单里的图片上传ENCTYPE="multipart/form-data"

    ENCTYPE="multipart/form-data"用于表单里有图片上传. <form action="<%=basePath %>asyUplo ...

随机推荐

  1. Android Annotations(1)

    特性:   Android Annotations是一个开源的框架,用于加速 Android应用的开发,可以让你把重点放在功能的实现上,简化了代码,提升了可维护性. 特性: 依赖注入: inject ...

  2. Java常见异常处理

    Exception类: 在java中用类的形式对不正常情况进行了描述和封装对象,异常就是java通过面向对象的思想将问题封装成了对象. 异常发生的原因有很多,通常包含以下几大类: 用户输入了非法数据. ...

  3. YYHS-NOIP模拟赛-gcd

    题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...

  4. struts2使用模型传值

    用户bean package userBeans; public class User { private String username; public String getUsername() { ...

  5. 在MVC中使用rdlc格式的报表

    前言 近期,在公司做的项目中做到报表模块需要使用rdlc格式的报表,这个报表需要使用WebForm来加载,但是现在用ASP.NET做项目基本上都是MVC.由于以前没有使用过,因此记录下来,供以后查阅. ...

  6. python异步并发模块concurrent.futures入门详解

    concurrent.futures是一个非常简单易用的库,主要用来实现多线程和多进程的异步并发. 本文主要对concurrent.futures库相关模块进行详解,并分别提供了详细的示例demo. ...

  7. 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. ...

  8. WinForm 菜单控件

    一:MenuStrip 菜单条 MenuStrip 是应用程序菜单条的容器. 二:ToolStripMenuItem 像上面图中, 文件 格式 等这些菜单当中的一级菜单以及文件中的 新建 打开 分割条 ...

  9. 疑似CPU或者内存故障导致进程崩溃

    我们有一个服务跑在微软云的所有宿主机上.最近发现某一台机器上该服务进程持续崩溃.崩溃原因是访问了一个无效指针,对应的代码如下 serviceListIniBuffer.AppendF("Se ...

  10. Python中的输出

    1.Python的输出语句 Python输出语句是print,但是python2.x与3.x又有点区别.python2.x输出 print "xxx"能成功执行,而3.x不行,所以 ...