<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>
圖片分片上傳|圖片大圖預(yù)覽(element)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門好芭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冲呢,你說我怎么就攤上這事舍败。” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵邻薯,是天一觀的道長(zhǎng)裙戏。 經(jīng)常有香客問我,道長(zhǎng)弛说,這世上最難降的妖魔是什么挽懦? 我笑而不...
- 正文 為了忘掉前任翰意,我火速辦了婚禮木人,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冀偶。我一直安慰自己醒第,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布进鸠。 她就那樣靜靜地躺著稠曼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪客年。 梳的紋絲不亂的頭發(fā)上霞幅,一...
- 文/蒼蘭香墨 我猛地睜開眼烫饼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼猎塞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起杠纵,我...
- 序言:老撾萬榮一對(duì)情侶失蹤荠耽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后比藻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體骇塘,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年韩容,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了款违。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布力穗,位于F島的核電站,受9級(jí)特大地震影響气嫁,放射性物質(zhì)發(fā)生泄漏当窗。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一寸宵、第九天 我趴在偏房一處隱蔽的房頂上張望崖面。 院中可真熱鬧,春花似錦梯影、人聲如沸巫员。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽简识。三九已至,卻和暖如春感猛,著一層夾襖步出監(jiān)牢的瞬間七扰,已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓拷泽,卻偏偏與公主長(zhǎng)得像疫鹊,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子司致,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 代碼為element的原聲代碼,在其功能上僅增加了一個(gè)下載功能拄轻,可正常使用颅围。需要下載其他格式圖片的可自行修改。
- 前端Vue圖片上傳組件支持單個(gè)文件多個(gè)文件上傳 自定義上傳數(shù)量 預(yù)覽刪除圖片 圖片壓縮恨搓, 下載完整代碼請(qǐng)?jiān)L問uni...
- element 預(yù)覽大圖組件進(jìn)行修改,增加保存圖片功能(base64) 文章來源于:https://www.jia...
- 先說明幾點(diǎn):1. 使用Vue 2.x茎辐。2. 這幾個(gè)例子是比較適合我自己項(xiàng)目場(chǎng)景的方案,主要為了記錄下掂恕,僅供參考拖陆。樣...