<template>
|
<div>
|
<el-upload
|
class="upload-demo"
|
:action="defaultSettings.uploadUrl"
|
:multiple="defaultSettings.multiple"
|
name="file"
|
:accept="defaultSettings.accept"
|
:file-list="showList"
|
:list-type="defaultSettings.type"
|
:limit="defaultSettings.num"
|
:disabled="defaultSettings.disabled"
|
:on-exceed="handleExceed"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-upload="beforeUpload"
|
:on-success="handleUploadSuccess"
|
:headers="headers"
|
:drag="settings.drag"
|
>
|
<template v-if="settings.drag">
|
<i class="el-icon-upload" />
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</template>
|
|
<el-button v-if="!settings.drag" size="small" type="primary">{{ defaultSettings.title }}</el-button>
|
<div v-if="defaultSettings.tip" slot="tip" class="el-upload__tip">{{ defaultSettings.tip }}</div>
|
<div v-else slot="tip" class="el-upload__tip">只能上传{{ defaultSettings.num }}个格式为[{{ defaultSettings.accept }}]的文件，且不超过{{ defaultSettings.max/1024 }}M
|
</div>
|
|
</el-upload>
|
<div id="uploadPreviewImages" style="display:none;">
|
<span
|
v-for="(src,index) in fileList"
|
:key="index"
|
>
|
<img
|
v-if="checkImg(src.name)"
|
class="v-img"
|
:src="src.url"
|
:alt="src.name"
|
style="width: 100px;height: 100px;"
|
>
|
</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import { sessionToken } from '@/settings'
|
import { getFtpUrl } from '@/utils/base'
|
import Viewer from 'viewerjs'
|
import 'viewerjs/dist/viewer.css'
|
let viewer = null
|
export default {
|
props: {
|
values: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
settings: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
headers: {
|
|
},
|
showList: [], // 用于详情展示
|
fileList: [],
|
defaultSettings: {
|
title: '点击上传',
|
max: 1024 * 100, // 最大大小，单位kb
|
num: 1, // 支持上传图片个数
|
accept: '.jpg,.jpeg,.png,.bmp,.pdf,.doc,.docx,.xls,.xlsx,.zip,.apk', // 限制格式
|
tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
|
uploadUrl: '', // 上传路径
|
multiple: true, // 是否支持批量上传
|
disabled: false, // 是否禁用
|
type: 'picture' // text/picture
|
}
|
}
|
},
|
watch: {
|
values(v) {
|
this.fileList = Object.assign([], v)
|
this.showList = Object.assign([], v)
|
this.$nextTick(() => {
|
this.initPreviewImg()
|
})
|
}
|
},
|
created() {
|
this.showList = Object.assign([], this.values)
|
this.fileList = Object.assign([], this.values)
|
|
this.showList.forEach(obj => {
|
obj.url = this.getUrl(obj.path)
|
})
|
|
this.fileList.forEach(obj => {
|
obj.url = this.getUrl(obj.path)
|
})
|
|
this.defaultSettings = Object.assign(this.defaultSettings, this.settings)
|
// console.log(this.defaultSettings)
|
// this.$nextTick(() => {
|
// new Viewer(document.getElementsByClassName('el-upload-list'))
|
// })
|
},
|
mounted() {
|
this.initPreviewImg()
|
this.headers[sessionToken] = getToken()
|
},
|
methods: {
|
handleRemove(file, fileList) {
|
for (let i = 0; i < this.fileList.length; i++) {
|
const img = this.fileList[i]
|
if (file.uid == img.uid) {
|
this.fileList.splice(i, 1)
|
break
|
}
|
}
|
|
this.$nextTick(() => {
|
this.initPreviewImg()
|
})
|
},
|
|
handleExceed(files, fileList) {
|
this.$message.warning('最多上传' + this.defaultSettings.num + '个文件')
|
},
|
beforeUpload(file) {
|
// console.log('upload before')
|
let isRepeat = true
|
for (let i = 0; i < this.fileList.length; i++) {
|
const f = this.fileList[i]
|
if (file.name == f.name) {
|
isRepeat = false
|
break
|
}
|
}
|
|
if (!isRepeat) {
|
this.$message.error('该文件已存在!')
|
}
|
const isImg = this.defaultSettings.accept.split(',').indexOf(file.name.substr(file.name.lastIndexOf('.'), file.name.length).toLocaleString()) > -1
|
const isLt2M = file.size / 1024 < this.defaultSettings.max
|
if (!isImg) {
|
this.$message.error('上传文件格式只能是 ' + this.defaultSettings.accept + ' 格式!')
|
}
|
if (!isLt2M) {
|
this.$message.error('上传文件大小不能超过 ' + this.defaultSettings.max / 1024 + 'M!' + '当前文件大小：' + parseInt(file.size / 1024 / 1024) + 'M')
|
}
|
return isImg && isLt2M && isRepeat
|
},
|
handleUploadSuccess(response, file, fileList) {
|
// console.log('upload sucess')
|
// console.log(response.data)
|
response.data.forEach(f => {
|
this.fileList.push({
|
uid: file.uid,
|
name: f.name,
|
url: this.getUrl(f.path),
|
path: f.path,
|
attSize: f.attSize || null,
|
fileTime: f.fileTime || null
|
})
|
})
|
this.$nextTick(() => {
|
this.initPreviewImg()
|
})
|
},
|
getContent() {
|
return this.fileList
|
},
|
handlePreview(file) {
|
if (!this.checkImg(file.name)) {
|
return false
|
}
|
let index = 0
|
for (let i = 0; i < this.fileList.length; i++) {
|
const f = this.fileList[i]
|
if (this.checkImg(f.name)) {
|
if (file.uid == f.uid) {
|
break
|
}
|
index++
|
}
|
}
|
// this.fileList.forEach((f, i) => {
|
// if (file.uid == f.uid) {
|
// index = i
|
// }
|
// })
|
// document.querySelector('#uploadPreviewImages').children[0].click()
|
viewer.view(index)
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-05-26 14:48
|
* @Description : 初始化
|
*/
|
initPreviewImg() {
|
if (viewer != null) {
|
viewer.destroy()
|
}
|
const ViewerDom = document.querySelector('#uploadPreviewImages')
|
viewer = new Viewer(ViewerDom, {
|
|
})
|
// console.log(this.fileList)
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-05-26 14:48
|
* @Description : 校验图片
|
*/
|
checkImg(name) {
|
const suffix = name.substring(name.lastIndexOf('.'), name.length)
|
const imgArray = ['.jpg', '.jpeg', '.png', '.bmp']
|
if (imgArray.indexOf(suffix) < 0) {
|
return false
|
}
|
return true
|
},
|
getUrl(path) {
|
if (path.substr(0, 7).toLowerCase() == 'http://' || path.substr(0, 8).toLowerCase() == 'https://') {
|
return path
|
} else {
|
return getFtpUrl() + path
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 图片预览层级*/
|
.viewer-container {
|
z-index: 90709102!important;
|
}
|
|
</style>
|
