vue 本地預覽多圖上傳

前端校園發表於2018-08-08
Vue

此元件的開發是為了後臺管理的多圖上傳，並實現本地預覽修改，當使用者確認後開始整體提交，此元件使用了我的另一篇文章所用到的元件

######所遇到的問題?

選擇多個檔案後無法實現本地預覽？

  • 使用es6的for of 對獲取到的檔案物件陣列 filelist進行迭代迴圈
  • 使用 FileReader 物件將選擇的圖片檔案轉換成可以前端展示的 base 64資料
  • 在新陣列被將圖片資料push進去就可以實現本地多圖預覽了
 fileChange(files) { // files 為接收到的檔案物件
      const _this = this // 儲存this 
      for (let i = 0; i < files.length; i++) { //對檔案陣列物件進行迭代迴圈
        const reader = new FileReader()
        this.imgfiles.push(files[i])
        reader.readAsDataURL(files[i])
        reader.onloadend = function() {
          console.log(this.result)
          _this.imgs.push(this.result)
        }
      }
複製程式碼

對不要的圖片進行刪除？

  • 獲取圖片陣列下標，使用陣列 slice方法進行刪除 獲取下標：
   <div class="img-box" v-for="(item, i) in imgs" :key='i' >
         <img :src="item" alt=""> <span @click="del(i)"><i class="el-icon-delete"></i></span>
    </div>
複製程式碼

v-for 的i就代表了陣列的下標，因為我們不僅需要刪除圖片陣列，還需要刪除檔案陣列，刪除操作：

    del(i) {
      this.imgfiles.splice(i, 1)
      this.imgs.splice(i, 1)
      this.imgsChange()
    },
複製程式碼

將獲取到的檔案物件向父元件進行廣播

    imgsChange() {
      this.$emit('imgsChange', this.imgfiles) //廣播事件名：imgsChange，引數  this.imgfiles
    }
複製程式碼

下面是我封裝的元件的完整程式碼，沒有進行更多的操作，僅僅是把選擇的圖片可以本地預覽，刪除，增加

<template>
    <div class="img-files flex">
        <div v-if='imgs.length>0' class="flex">
            <div class="img-box" v-for="(item, i) in imgs" :key='i' >
                <img :src="item" alt=""> <span @click="del(i)"><i class="el-icon-delete"></i></span>
            </div>
        </div>
        <div class="img-file" v-if= 'imgs.length<size'>
             <img-upload  @fileChange='fileChange' multiple='true'> <i class="el-icon-plus avatar-uploader-icon"></i></img-upload>
        </div>
    </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
export default {
  name: 'imgFiles',
  props: {
    size: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      imgs: [],
      imgfiles: []
    }
  },
  components: {
    ImgUpload
  },
  methods: {
    fileChange(files) {
      console.log(files)
      const _this = this
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader()
        this.imgfiles.push(files[i])
        reader.readAsDataURL(files[i])
        reader.onloadend = function() {
          console.log(this.result)
          _this.imgs.push(this.result)
        }
      }
      this.imgsChange()
    },
    del(i) {
      this.imgfiles.splice(i, 1)
      this.imgs.splice(i, 1)
      this.imgsChange()
    },
    imgsChange() {
      this.$emit('imgsChange', this.imgfiles)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .img-box{
    position: relative;
    border:1px solid #e6e6e6;
    margin-right: 20px;
    padding-top:30px;
    background: #f6f6f6;
    img{
      width: 160px;
    }
    span {
      position: absolute;
      top:5px;
      right: 10px;
      color: red;
    }
}
.img-file{
    height: 190px;
    width: 190px!important;
    display: flex;
    align-items: center;
    font-size: 30px;
    text-align: center;
    border: 1px #e6e6e6 dashed;
    justify-content: center;
    margin: 0;
}
</style>

複製程式碼

相關文章