圖片分片上傳|圖片大圖預(yù)覽(element)

<template>
  <div class="dashboard-container">
    <div class="box">
      <div class="grid-content">
        <div class="pic-list">
          <img v-for="item in picList" :key="item.id" :src="item.thumbnail" class="pic" @click="onPreview(item.image)">
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <div class="grid-content-right">
          <el-upload
            class="upload-demo"
            drag
            :file-list="uploadList"
            list-type="picture"
            action
            multiple
            :before-upload="(file)=>uploadImg(file)"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">將文件拖到此處拉岁,或<em>點(diǎn)擊上傳</em></div>
          </el-upload>
        </div>
      </div>
    </div>
    <ElImageViewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcListView"
    />
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { uploadList } from '@/api/table'
import { getToken } from '@/utils/auth'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'Upload',
  components: {
    ElImageViewer
  },
  data() {
    return {
      picList: [],
      uploadList: [],
      total: 0,
      currentPage: 1,
      showViewer: false,
      srcListView: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getUploadList()
  },
  methods: {
    getUploadList() {
      uploadList({ token: getToken(), page: this.currentPage }).then(res => {
        this.picList = res.data.data
        this.currentPage = res.data.current_page
        this.total = res.data.total
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUploadList()
    },
    onPreview(src) {
      console.log(src)
      this.srcListView = [src]
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    uploadImg(file) {
      var fileSize = file.size
      var chunkSize = 1024000 // 分片大小為1MB
      var totalChunks = Math.ceil(fileSize / chunkSize) // 計(jì)算總的分片數(shù)
      var chunkIndex = 0
      const inArrayIndex = this.uploadList.length
      this.uploadList.push({
        name: file.name,
        url: '',
        percentage: 0,
        status: 'uploading'
      })
      const uploadChunk = () => {
        var start = chunkIndex * chunkSize
        var end = Math.min(start + chunkSize, fileSize)
        var chunks = Math.floor(fileSize / chunkSize) // 計(jì)算總的分片數(shù)

        var chunk = file.slice(start, end) // 獲取當(dāng)前分片
        var fd = new FormData()
        fd.append('chunk', chunk) // 當(dāng)前分片文件
        fd.append('chunkIndex', chunkIndex) // 當(dāng)前分片編號(hào)
        fd.append('filename', file.name) // 文件名
        fd.append('filesize', fileSize) // 文件尺寸
        fd.append('project', 'BoschVideo') // 項(xiàng)目名,會(huì)指定的
        fd.append('chunks', chunks) // 總共的分片數(shù)

        // 發(fā)送請(qǐng)求
        var xhr = new XMLHttpRequest()
        xhr.open('POST', process.env.VUE_APP_BASE_API + '/smart/michelin/chunkUpload', true)
        xhr.onreadystatechange = (e) => {
          console.log('eeeeeee', e)
          if (e.target.status === 200 && e.target.readyState === 4) {
            var res = JSON.parse(e.target.response)
            if (res.code === 1) {
              chunkIndex++
              this.uploadList[inArrayIndex].percentage = (chunkIndex / totalChunks * 100).toFixed(0)
              if (chunkIndex < totalChunks) {
                uploadChunk() // 繼續(xù)上傳下一分片
              } else {
                this.uploadList[inArrayIndex].status = 'success'
                this.uploadList[inArrayIndex].url = res.data.thumbnail
                this.getUploadList()
              }
            } else {
              this.toast('上傳失敗追他,請(qǐng)重試')
            }
          }
        }
        xhr.send(fd)
      }
      new Promise(uploadChunk)
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .box{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .grid-content-right{
      width: 360px;
      min-height: 85vh;
      background: #f3f5f7;
    }
    .grid-content{
      flex: 1;
    }
    .pic-list{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .pic{
      width: 180px;
      margin: 5px;
    }
    .el-pagination{
      text-align: center;
    }

  }
}
</style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末承璃,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子卦溢,更是在濱河造成了極大的恐慌坯临,老刑警劉巖收班,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件研儒,死亡現(xiàn)場(chǎng)離奇詭異豫缨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)端朵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門好芭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冲呢,你說我怎么就攤上這事舍败。” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵邻薯,是天一觀的道長(zhǎng)裙戏。 經(jīng)常有香客問我,道長(zhǎng)弛说,這世上最難降的妖魔是什么挽懦? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任翰意,我火速辦了婚禮木人,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冀偶。我一直安慰自己醒第,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布进鸠。 她就那樣靜靜地躺著稠曼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪客年。 梳的紋絲不亂的頭發(fā)上霞幅,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音量瓜,去河邊找鬼司恳。 笑死,一個(gè)胖子當(dāng)著我的面吹牛绍傲,可吹牛的內(nèi)容都是我干的扔傅。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼烫饼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼猎塞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起杠纵,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤荠耽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后比藻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體骇塘,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年韩容,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了款违。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡群凶,死狀恐怖插爹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤赠尾,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布力穗,位于F島的核電站,受9級(jí)特大地震影響气嫁,放射性物質(zhì)發(fā)生泄漏当窗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一寸宵、第九天 我趴在偏房一處隱蔽的房頂上張望崖面。 院中可真熱鬧,春花似錦梯影、人聲如沸巫员。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽简识。三九已至,卻和暖如春感猛,著一層夾襖步出監(jiān)牢的瞬間七扰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工陪白, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留颈走,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓拷泽,卻偏偏與公主長(zhǎng)得像疫鹊,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子司致,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容