<template>
|
<span class="upload-content pr">
|
<el-button
|
type="primary"
|
:loading="upLoadLoading"
|
:size="uploadBtnSize"
|
data-style="slide-down"
|
@click.native="uploadStart"
|
>
|
<i :class="uploadBtnIcon"></i>
|
{{uploadBtntext}}
|
</el-button>
|
<div class="upload-progress" v-if="isShowProgress">
|
<b-progress
|
variant="warning"
|
striped
|
:style="`opacity: ${isShowProgress&&showProgress?1:0}`"
|
:value="progressValue"
|
height="5px"
|
/>
|
</div>
|
<input type="file" ref="fileInput" multiple @change="clickUpLoad" />
|
<div class="drag-area py-4 px-4" v-show="isShowBox">
|
<div
|
ref="drag_area"
|
:class="['text-center files-area py-4 px-4',drag_class]"
|
@click="uploadStart('fileInput')"
|
@dragover="dragover($event)"
|
@drop="drop($event)"
|
@dragenter="dragenter($event)"
|
@dragleave="dragleave($event)"
|
>
|
<i class="el-icon-upload text-primary" style="color:rgb(61, 104, 225)"></i>
|
<div class="el-upload__text" style="color:#babbbc!important">
|
将文件拖到此处，或
|
<em class="text-primary cursor-pointer">点击上传</em>
|
</div>
|
<div
|
class="el-upload__tip text-light"
|
style="color:#babbbc!important"
|
>{{limitTypes?`只能上传${limitTypes}文件`:''}}{{limitSize?` 文件大小不超过${limitSize}`:''}}</div>
|
</div>
|
</div>
|
<div class="upload-model" v-show="isShowBox" @click="isShowBox=false"></div>
|
</span>
|
</template>
|
<script>
|
import axios from 'axios'
|
import { guid } from './util.js'
|
|
export default {
|
name: 'upload',
|
props: {
|
/* 上传控件列表是否删除功能 */
|
isDelFile: {
|
default: true,
|
type: Boolean
|
},
|
/* 类型限制（后缀名,分隔） 传入示例'.png,.jpg' 不限制为 '' */
|
limitTypes: {
|
default: '',
|
type: String
|
},
|
/* 文件大小限制 传入示例'1M' 单位支持G、M、K、B 无单位按B计算 不限制为 '' */
|
limitSize: {
|
default: '5M',
|
type: String
|
},
|
/* 上传按钮文字 */
|
uploadBtntext: {
|
default: '上传',
|
type: String
|
},
|
/* 上传按钮icon */
|
uploadBtnIcon: {
|
default: 'ion ion-md-cloud-upload',
|
type: String
|
},
|
uploadBtnSize: {
|
default: '',
|
type: String
|
},
|
uploadBtnStyle: {
|
default: '',
|
type: String
|
},
|
uploadBtnClass: {
|
default: 'btn btn-primary',
|
type: String
|
},
|
isShowProgress: {
|
default: false,
|
type: Boolean
|
},
|
isDrag: {
|
default: false,
|
type: Boolean
|
},
|
idJson: {
|
default: null,
|
type: Object
|
}
|
/**
|
* 上传组件回值方法
|
* @description 上传组件回值方法
|
* @return { function } addFilesBaBackFN 添加上传成功后返回 {fileIds,fileList}
|
*/
|
},
|
data() {
|
return {
|
isShowBox: false,
|
drag_class: '',
|
fileList: [],
|
erFileList: [],
|
suFileList: [],
|
fileIds: [],
|
upLoadLoading: false,
|
showProgress: false,
|
progressValue: 0
|
}
|
},
|
computed: {},
|
methods: {
|
islimitTypes(fileObj) {
|
if (this.limitTypes === '') {
|
return 'success'
|
}
|
if (
|
this.limitTypes.indexOf(
|
fileObj.name.toLowerCase().replace(/^.+\./, '')
|
) === -1
|
) {
|
const msg = {
|
type: 'error',
|
errorType: '上传类型错误',
|
message:
|
/* ${fileObj && fileObj.name ? '“' + fileObj.name + '”' : ''} */
|
`上传文件必须是${this.limitTypes},请您核查`
|
}
|
// this.$notify(msg)
|
return msg
|
}
|
return 'success'
|
},
|
islimitSize(fileObj) {
|
if (this.limitSize === '') {
|
return 'success'
|
}
|
let size = 0
|
if (this.limitSize.indexOf('G') !== -1) {
|
size = this.limitSize.replace('G', '') * 1024 * 1024 * 1024
|
} else if (this.limitSize.indexOf('M') !== -1) {
|
size = this.limitSize.replace('M', '') * 1024 * 1024
|
} else if (this.limitSize.indexOf('K') !== -1) {
|
size = this.limitSize.replace('K', '') * 1024
|
} else if (this.limitSize.indexOf('B') !== -1) {
|
size = this.limitSize.replace('B', '')
|
} else {
|
size = this.limitSize
|
}
|
if (size < fileObj.size) {
|
const msg = {
|
type: 'error',
|
errorType: '上传大小错误',
|
message:
|
`${
|
fileObj && fileObj.name ? '“' + fileObj.name + '”' : ''
|
}必须小于` + this.limitSize
|
}
|
// this.$notify(msg)
|
return msg
|
}
|
return 'success'
|
},
|
uploadStart(type) {
|
this.$refs.fileInput.value = ''
|
this.fileList = []
|
this.erFileList = []
|
this.suFileList = []
|
if (this.isDrag && type !== 'fileInput') {
|
this.isShowBox = !this.isShowBox
|
} else {
|
this.$refs.fileInput.click()
|
}
|
},
|
/* 点击上传 */
|
clickUpLoad(e) {
|
if (e.target && e.target.files) {
|
this.handleUpLoad(e.target.files)
|
}
|
},
|
// 上传附件
|
handleUpLoad(files) {
|
// 判断是否选择底库
|
// console.log(this.idJson, 'upload this.idJson')
|
if (this.idJson.tableId === undefined || this.idJson.tableId === '') {
|
this.$notify({
|
type: 'error',
|
message: '请先选择一个底库!'
|
})
|
return
|
}
|
/* 拿到上传文件 */
|
if (files.length === 0) {
|
return false
|
}
|
this.fileList = [...files]
|
/* 重置进度条 */
|
this.showProgress = true
|
this.progressValue = 0
|
/* 开启上传按钮loding */
|
this.upLoadLoading = true
|
/* 创建FormData文件对象 */
|
const fd = new FormData()
|
this.fileList.map((file, index) => {
|
/* 文件校验 start */
|
const islimitTypes = this.islimitTypes(file)
|
const islimitSize = this.islimitSize(file)
|
if (islimitTypes !== 'success') {
|
this.erFileList.push({
|
uuId: guid(),
|
file: file,
|
errorMsg: islimitTypes
|
})
|
return false
|
}
|
if (islimitSize !== 'success') {
|
this.erFileList.push({
|
uuId: guid(),
|
file: file,
|
errorMsg: islimitSize
|
})
|
return false
|
}
|
this.suFileList.push(file)
|
/* 文件校验 end */
|
// fd.append('files' + index, file)
|
fd.append('files', file)
|
})
|
// fd.append('files', this.suFileList)
|
/* 添加tableId start */
|
if (this.idJson && this.idJson.tableId) {
|
console.log(this.idJson, 'upload this.idJson')
|
fd.append('tableId', this.idJson.tableId)
|
}
|
/* 添加orgId officeId end */
|
// fd.append('fileSource', 'FDFS')
|
if (this.fileList.length > this.erFileList.length) {
|
this.uploadServer(fd)
|
} else {
|
/* 回调传值 */
|
this.$emit('addFilesBaBackFN', {
|
suFileList: this.suFileList,
|
erFileList: this.erFileList,
|
fileList: this.fileList,
|
result: null
|
})
|
/* 结束上传按钮loding */
|
this.upLoadLoading = false
|
/* 隐藏拖拽框 */
|
this.isShowBox = false
|
}
|
},
|
async uploadServer(fd) {
|
// this.$store.commit('HANDLE_LOADING_OPEN')
|
const token = JSON.parse(
|
sessionStorage.getItem('loginedInfo')
|
).access_token
|
try {
|
let res = await axios({
|
method: 'post',
|
url: `/data/api-v/dbperson/moreFileUpload`,//?access_token=${token}
|
data: fd,
|
name: 'files',
|
headers: {
|
Authorization: token
|
},
|
onUploadProgress: progressEvent => {
|
if (
|
this.isShowProgress &&
|
progressEvent.loaded &&
|
progressEvent.total
|
) {
|
this.progressValue =
|
(progressEvent.loaded / progressEvent.total) * 100
|
}
|
}
|
})
|
if (res && res.data) {
|
const result = res.data
|
// this.$notify({
|
// type: result && result.success ? 'success' : 'error',
|
// message: result.msg
|
// })
|
this.progressValue = 0
|
this.showProgress = false
|
this.$emit('successFN', result)
|
// let errorArr = []
|
// // 根据与后台约定data数组返回的都是存在业务意义错误的对象
|
// if (result.data && result.data.length) {
|
// errorArr = result.data.map(file => {
|
// // 遍历前台抛给后台的fileList 进行比对赋值file文件及message
|
// for (var i = 0; i < this.suFileList.length; i++) {
|
// const iteam = this.suFileList[i]
|
// if (
|
// file.upload.fileName &&
|
// iteam.name === file.upload.fileName
|
// ) {
|
// return {
|
// uuId: guid(),
|
// file: iteam,
|
// photos: file.upload.path,
|
// baseList: file.baseList ? file.baseList : null,
|
// errorMsg: {
|
// type: 'error',
|
// errorType: '上传异常',
|
// message: file.reason ? file.reason : result.msg
|
// }
|
// }
|
// }
|
// }
|
// })
|
// }
|
/* 回调传值 */
|
// 处理错误文件列表 如果为0说明全部成功，（通过校验，并在后台成功完成注册添加）
|
// let erFileList =
|
// result && result.success
|
// ? this.erFileList
|
// : [...this.erFileList, ...errorArr]
|
// // 全部成功无需打开业务弹窗
|
// if (erFileList.length > 0) {
|
// this.$emit('addFilesBaBackFN', {
|
// suFileList: result && result.success ? this.suFileList : [],
|
// erFileList: erFileList,
|
// fileList: this.fileList,
|
// result: res
|
// })
|
// }
|
// if (erFileList.length === 0) {
|
// this.$emit('successFN')
|
// }
|
}
|
} catch (error) {
|
// this.$notify({
|
// type: 'error',
|
// message: '服务器错误！请联系管理员' // + error.message
|
// })
|
this.progressValue = 0
|
this.showProgress = false
|
console.log('catch---', error)
|
const errorArr = this.suFileList.map(file => {
|
return {
|
uuId: guid(),
|
file: file,
|
errorMsg: {
|
type: 'error',
|
errorType: '上传服务器错误',
|
message: '图片不是单人脸照片，请重新上传'
|
}
|
}
|
})
|
this.erFileList = [...this.erFileList, ...errorArr]
|
/* 回调传值 */
|
this.$emit('addFilesBaBackFN', {
|
suFileList: [],
|
erFileList: this.erFileList,
|
fileList: this.fileList,
|
result: error
|
})
|
}
|
//this.$store.commit('HANDLE_LOADING_CLOSE')
|
/* 结束上传按钮loding */
|
this.upLoadLoading = false
|
/* 隐藏拖拽框 */
|
this.isShowBox = false
|
},
|
/* 拖拽函数 start */
|
dragleave(el) {
|
this.drag_class = ''
|
el.stopPropagation()
|
el.preventDefault()
|
},
|
dragenter(el) {
|
this.drag_class = 'active'
|
el.stopPropagation()
|
el.preventDefault()
|
},
|
dragover(el) {
|
this.drag_class = 'active'
|
el.stopPropagation()
|
el.preventDefault()
|
},
|
drop(el) {
|
el.stopPropagation()
|
el.preventDefault()
|
if (el.dataTransfer && el.dataTransfer.files) {
|
this.handleUpLoad(el.dataTransfer.files)
|
}
|
}
|
/* 拖拽函数 end */
|
},
|
created() { },
|
watch: {
|
progressValue(newVal, oldVal) {
|
if (newVal !== oldVal && newVal >= 100) {
|
setTimeout(() => {
|
this.showProgress = false
|
this.progressValue = 0
|
}, 1500)
|
}
|
}
|
},
|
components: {
|
//LaddaBtn
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload-img-icon {
|
width: 60px;
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.upload-progress {
|
width: 96%;
|
position: absolute;
|
left: 2px;
|
bottom: 2px;
|
opacity: 1;
|
transition: all 0.5s;
|
}
|
.upload-content {
|
position: relative;
|
input[type="file"] {
|
position: absolute;
|
opacity: 0;
|
width: 82px;
|
height: 38px;
|
left: 0;
|
display: none;
|
}
|
}
|
.drag-area {
|
position: absolute;
|
z-index: 100 !important;
|
width: 320px;
|
height: 160px;
|
padding: 20px;
|
right: 0;
|
top: 35px;
|
z-index: 5;
|
background: #f1f1f1;
|
border-radius: 5px;
|
.files-area {
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
border: 1px dashed #d9d9d9;
|
border-radius: 5px;
|
}
|
.files-area.active {
|
border: 2px dashed #35bde7;
|
}
|
.files-area:hover {
|
border: 1px dashed #35bde7;
|
}
|
.el-icon-upload {
|
font-size: 80px;
|
margin-top: 20px;
|
}
|
}
|
.upload-model {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 99;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
</style>
|
