vue中图片批量上传

首先说一下会用到几个知识点php

1.
event.target.files[0]html

获取的是上传的图片的一些参数以下图：前端

能够本身依次打印看看vue

console.log(event, event.target, event.target.files, event.target.files[0])json

2.api

HTML5中FileReader数组

在FileReader出现以前，前端的图片预览是这样实现的：
把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。浏览器

这种方法的缺点是：
必需要先把图片上传到服务器。若是上传的图片很大，而网速又很慢，这就须要等待好久预览图片才会显示出来了，若是用户预览图片后发现不太满意，想从新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。服务器

有了HTML5的FileReader对象之后，预览图片变得简单多了，再也不须要后台的配合，这种方法的思路是：app

经过FileReader.prototype.readAsDataURL()
方法把图片文件转成base64编码，而后把base64编码替换到预览图片的src属性便可。

let that = this; let file = event.target.files[0]; let reader = new FileReader(); // 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(file); // 监听reader对象的onload事件，当图片加载完成时，把base64编码賦值给预览图片
reader.onload = function () { file.src = this.result; // console.log(this); 这里的this是FileReader对象
  // console.log(file)
  // 再把file对象添加到img数组
 that.imgList.push({ file }); }

完整FileReader api
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

3.
HTML5中FormData

FormData能够把它理解成一个虚拟的表单对象，它只有一个方法append，能够在浏览器console一下就知道了。咱们能够经过append向FormData里面添加各类须要提交的数据。

先建立一个空的FormData对象，而后使用append()方法向该对象里添加字段，以下：

var oMyForm = new FormData(); oMyForm.append("username", "Groucho"); oMyForm.append("accountnum", 123456); // 数字123456被当即转换成字符串"123456"

若是已经有一个Form表单，只须要把这个form dom元素做为参数传入FormData构造函数便可：

var form=document.getElementById("form1"); var formData=new FormData(form); var oReq = new XMLHttpRequest(); oReq.onreadystatechange=function(){ if(oReq.readyState === 4){ if(oReq.status === 200){ var json=JSON.parse(oReq.responseText); var result = ''; } } } oReq.open("POST", "server.php"); oReq.send(formData);

在vue中使用：

 data () { return { imgList: [], size: 0, imgData: { accept: 'image/gif, image/jpeg, image/png, image/jpg', }, img: require('./5.jpg'), // 选中的省、市、区
 city: [], // 3级联动城市数据来源area-data
 pcaa: pcaa, show: true } }, methods: { // dom触发
 fileClick() { this.$refs.uploadfile.click() }, // 上传图片
 fileChange (event) { // console.log(event, event.target, event.target.files, event.target.files[0])
      if (!event.target.files[0].size) return; let files = event.target.files; // 批量上传
      for (let i = 0; i < files.length; i++) { // 单张上传
        this.fileAdd(files[i]); } // console.log(this.imgList)
 }, // 单张上传
 fileAdd (file) { // console.log(file);
      let type=file.type;//文件的类型，判断是不是图片 
      let size=file.size;//文件的大小，判断图片的大小
      if(this.imgData.accept.indexOf(type) === -1){ alert('请选择咱们支持的图片格式！'); return false; } if(size > 3145728){ alert('请选择3M之内的图片！'); return false; } let that = this; // 总大小
      this.size = this.size + file.size; let reader = new FileReader(); // 调用reader.readAsDataURL()方法，把图片转成base64
 reader.readAsDataURL(file); // 监听reader对象的onload事件，当图片加载完成时，把base64编码賦值给预览图片
      reader.onload = function () { file.src = this.result; // console.log(this); 这里的this是FileReader对象
        // 再把file对象添加到imgList数组
 that.imgList.push({ file }); } }, // 计算转换图片大小
 bytesToSize (bytes) { if (bytes === 0) return '0 B'; let k = 1000, // or 1024
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }, // 删除
 fileDel (index) { this.size = this.size - this.imgList[index].file.size;//总大小
      this.imgList.splice(index, 1); this.img = require('./5.jpg'); }, // 更换预览图片
 changeImg (index) { // console.log(this.imgList[index].file.src)
      this.img = this.imgList[index].file.src; } }, computed: { }, watch: { // 监听imgList数据变化,不能超过9张图片
    imgList: function () { if (this.imgList.length > 9) { this.imgList.length = 9; // 超过9张后从新计算图片大小
        this.size = 0; for (let i = 0; i < 9; i ++) { this.size = this.size + this.imgList[i].file.size; } // console.log(this.imgList);
 } } },

参考文献：

https://blog.csdn.net/leileibrother/article/details/79020758

https://www.cnblogs.com/lwwen/p/6210126.html

https://blog.csdn.net/weixin_41957098/article/details/80351914