<template>
|
<div>
|
<el-upload
|
class="upload-demo"
|
drag
|
: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-remove="handleRemove"
|
:before-upload="beforeUpload"
|
:on-success="handleUploadSuccess"
|
:headers="headers"
|
>
|
<i class="el-icon-upload" />
|
<div class="el-upload__text">将文件拖到此处，或<em>{{ defaultSettings.title }}</em></div>
|
<div slot="tip" class="el-upload__tip">
|
只能上传{{ defaultSettings.num }}个，且格式为[{{ defaultSettings.accept }}]的文件，
|
且不超过{{ defaultSettings.max }}MB
|
</div>
|
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import { sessionToken } from '@/settings'
|
import { getFtpUrl } from '@/utils/base'
|
|
export default {
|
props: {
|
values: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
settings: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
headers: {
|
|
},
|
showList: [], // 用于详情展示
|
fileList: [],
|
defaultSettings: {
|
title: '点击上传',
|
max: 100, // 最大大小，单位MB
|
num: 1, // 支持上传文件个数
|
accept: '.jpg,.png,.pdf,.doc,.docx,.xls,.xlsx,.zip,.txt,.rar,.ppt,.pptx,.xlt', // 限制格式
|
tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}MB`
|
uploadUrl: '', // 上传路径
|
multiple: true, // 是否支持批量上传
|
disabled: false, // 是否禁用
|
type: 'text' // text/picture
|
}
|
}
|
},
|
watch: {
|
values(v) {
|
this.fileList = Object.assign([], v)
|
this.showList = Object.assign([], v)
|
this.showList.forEach(obj => {
|
obj.url = this.getUrl(obj.path)
|
})
|
this.fileList.forEach(obj => {
|
obj.url = this.getUrl(obj.path)
|
})
|
}
|
},
|
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)
|
},
|
mounted() {
|
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
|
}
|
}
|
},
|
|
handleExceed(files, fileList) {
|
this.$message.warning('最多上传' + this.defaultSettings.num + '个文件')
|
},
|
beforeUpload(file) {
|
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 / 1024 < this.defaultSettings.max
|
if (!isImg) {
|
this.$message.error('上传文件格式只能是 ' + this.defaultSettings.accept + ' 格式!')
|
}
|
if (!isLt2M) {
|
this.$message.error('上传文件大小不能超过 ' + this.defaultSettings.max + 'MB')
|
}
|
return isImg && isLt2M && isRepeat
|
},
|
handleUploadSuccess(response, file, fileList) {
|
if (response.code == 10000) {
|
response.data.forEach(f => {
|
this.fileList.push({
|
uid: file.uid,
|
name: f.name,
|
url: this.getUrl(f.path),
|
path: f.path
|
})
|
})
|
} else {
|
// 上传失败，把显示的上传文件List中相应失败的文件剔除
|
this.showList = this.fileList
|
console.log('上传失败!')
|
this.$message.warning('上传失败!')
|
}
|
},
|
getContent() {
|
return this.fileList
|
},
|
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>
|
