<template>
|
<span class="upload-content pr">
|
<span
|
class="iconfont iconfont-wrap iconshangchuantupian-09"
|
@click="uploadStart"
|
:loading="upLoadLoading"
|
></span>
|
<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)"
|
>
|
<div class="icon-wrap">
|
<span class="iconfont iconshangchuantupian-11"></span>
|
</div>
|
<div class="el-upload__text" style="margin-top: 10px">
|
将文件拖到此处或<span class="text-primary cursor-pointer"
|
>点击上传</span
|
>
|
</div>
|
<div class="el-upload__tip text-light">
|
{{ 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 "@/scripts/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,
|
};
|
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) {
|
// 判断是否选择底库
|
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) {
|
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.progressValue = 0;
|
this.showProgress = false;
|
this.$emit("successFN", result);
|
}
|
} catch (error) {
|
this.progressValue = 0;
|
this.showProgress = false;
|
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-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;
|
}
|
.iconshangchuantupian-09:hover {
|
border: 1px solid var(--colorCard);
|
background: var(--colorCard);
|
color: #fff;
|
}
|
}
|
.drag-area {
|
position: absolute;
|
z-index: 100 !important;
|
width: 320px;
|
height: 195px;
|
z-index: 5;
|
background: #ffffff;
|
padding: 20px 20px 20px 20px;
|
right: 0;
|
top: 45px;
|
border-radius: 8px;
|
box-sizing: border-box;
|
|
box-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
|
.text-center {
|
.icon-wrap {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 72px;
|
margin-top: 20px;
|
.iconfont {
|
font-size: 72px;
|
color: #bbd2f9;
|
}
|
}
|
.el-upload__tip,
|
.el-upload__text {
|
font-size: 12px;
|
line-height: 17px;
|
color: #999999;
|
margin-top: 0;
|
}
|
}
|
.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>
|
