formData实现图片上传

世上唯一不能复制的是时间,唯一不能重演的是人生,唯一不劳而获的是年龄。该怎么走,过什么样的生活,全凭自己的选择和努力。人生很贵,请别浪费!与智者为伍,与良善者同行。formData实现图片上传,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

前言

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

  1、将图片转化为dataURL(base64),这样就成为了一串字符串,再传到服务端。不过这样缺点很多,数据量比转换之前增加1/3,而且会增加了存储开销(如果存在数据库,就多了访问数据库;如果解析成图片再存储,就多了解析的开销)。所以这样方式不可取。

  2、使用formData对象进行上传。

FormData对象

  先看MDN上对FormData对象的介绍:XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件

  构造formData

//1
var formData = new FormData(formDOM);


//2
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 > 0){
  [].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);  //发送请求

  查看效果,选择的图片已成功上传到指定的目录。

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){

}
})

  查看效果,依旧可以上传成功。

formData实现图片上传

 

 3、vue-axios上传

  只需要配置header即可。

        headers: {
          'Content-Type': 'multipart/form-data'
        },

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/229250.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!