vue中圖片批量上傳

首先說一下會用到幾個知識點

1.
event.target.files[0]

獲取的是上傳的圖片的一些參數如下圖：

可以自己依次打印看看

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

 

2.

HTML5中FileReader

 

在FileReader出現之前，前端的圖片預覽是這樣實現的：
把本地圖片上傳到服務器，服務器把圖片地址返回，並把它替換到圖片元素的src屬性。

 

這種方法的缺點是：
必須要先把圖片上傳到服務器。如果上傳的圖片很大，而網速又很慢，這就需要等待很久預覽圖片才會顯示出來了，如果用戶預覽圖片后發現不太滿意，想重新選擇一張圖片，這時候還要把已經上傳到服務器上的圖片給刪除掉。

 

有了HTML5的FileReader對象以后，預覽圖片變得簡單多了，不再需要后台的配合，這種方法的思路是：

 

通過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