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