vue+iview檔案上傳（base64編碼、型別驗證、大小限制、多檔案上傳及檔案預覽）

​ iview對檔案上傳提供了一個專門的標籤Upload，不過這個標籤預設需要一個介面action屬性，但一般我們向後臺上傳檔案並不會選擇檔案直接就上傳了 而是需要和其他的值一起傳送請求給後臺，並且檔案都是轉成base64編碼。

iview提供了一個方法阻止預設上傳：before-upload這個方法是在上傳檔案之前做的一些操作，當這個方法返回false表示手動上傳，不會通過action屬性來提交檔案

base64、型別驗證、大小限制：

<Upload
 :before-upload="before"
 action="">
 <Button icon="ios-cloud-upload-outline">檔案上傳</Button>
 </Upload>
 <div v-if="file!==null">{{file.name}}</div>
<script>
 export default{
 data(){
 return{
 file:null
 }
 }
 methods:{
 before(file) {//上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 或者 Promise 則停止上傳
 this.file = file
 const FileExt = this.file.name.replace(/.+\./,"");//取得檔案的字尾名
 if (file.size > 2097152) {//限制檔案的大小
  this.$Message.error(file.name + '大小超過2M!')
  this.file = null //超過大小將檔案清空
 } else if (['mp3'].indexOf(FileExt.toLowerCase()) === -1) { //判斷檔案是否是mp3格式
  this.$Message.error('請上傳以mp3結尾的檔案');
  this.file=null
 }else{
  const reader = new FileReader() //讀取檔案的字元流
  reader.readAsDataURL(file)//將檔案讀取為 DataURL 以data:開頭的字串
  reader.onload = e => {
  // 讀取到的圖片base64 資料編碼 將此編碼字串傳給後臺即可
  const code = e.target.result;
  this.algorithmData.videoFiles = code
  }
 }
 return false
 },/*上面判斷檔案格式的方式有很多 file物件中包含了檔案的type屬性 可列印file看看有哪些檔案屬性
 對於一般檔案的格式type都能顯示 但是對於ini這些型別的配置檔案是無法給出你型別的
 如果後臺明確指出具體的字尾名 用這個比較粗暴
 if(!/image\/\w+/.test(file.type)) 圖片驗證 只要是圖片型別都允許，就不需要通過後綴名判斷
 */
 }
 }
</script>

注意：當你的before-upload返回false後。upload的其他方法是不會觸發的，比如檔案格式驗證和檔案大小限制的這個鉤子是發生在before-upload之後的均不會觸發

Upload標籤提供一個multiple屬性允許上傳多個檔案

多檔案上傳、圖片預覽：

<div class="demo-upload-list" v-for="fileSrc in srcList">
 <img :src="fileSrc" alt="vue+iview實現檔案上傳"><!-- 圖片預覽部分-->
</div>
<Tooltip content="檔案格式為jpg、jpeg、png" placement="right">
 <Upload
 :before-upload="handleBeforeUpload"
 multiple
 type="drag"
 action=""
 style="display: inline-block;width:58px;">
 <div style="width: 58px;height:58px;line-height: 58px;">
 <Icon type="ios-camera" size="20"></Icon>
 </div>
 </Upload>
</Tooltip>

<script>
 export default{
 data(){
 return{
 uploadList:[],srcList = []
 }
 }
 methods:{
 handleBeforeUpload(file) {
 /*const FileExt = file.name.replace(/.+\./,"");*/
 if(this.uploadList.length<3) {
  if (file.size > 2097152) {
  this.$Message.error(file.name + '大小超過2M!')
  this.file = null
  } else if (!/image\/\w+/.test(file.type)) {
  this.$Message.error('請上傳以jpg、jpeg、png等結尾的圖片檔案');//FileExt.toLowerCase()
  this.file = null
  }
  this.base64(file)
  this.uploadList.push(file)
 }
 else{
  this.$Message.warning('只能上傳3張圖片!')
 }
 return false;
 },base64(file) {
 let reader = new FileReader()
 reader.onload = (e) => {
  this.srcList.push(e.target.result)//將base64編碼儲存到路徑陣列中
 }
 reader.readAsDataURL(file)
 },}
 }
</script>

關於vue.js的學習教程，請大家點選專題vue.js元件學習教程、Vue.js前端元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。