附件上传组件列表

<template>

<div class="upload-file">

<el-upload

multiple

:action="uploadFileUrl"

:before-upload="handleBeforeUpload"

:file-list="fileList"

:limit="limit"

:type="type"

:on-error="handleUploadError"

:on-exceed="handleExceed"

:on-success="handleUploadSuccess"

:show-file-list="false"

:headers="headers"

class="upload-file-uploader"

ref="upload"

>

<!-- 上传按钮 -->

<el-button size="mini" type="primary" v-if="canEdit">选取文件</el-button>

<!-- 上传提示 -->

<span class="el-upload__tip" slot="tip" v-if="showTip && canEdit">

请上传

<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>

<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>

的文件

</span>

</el-upload>

<!-- 文件列表 -->

<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">

<li :key="file.fileId" class="el-upload-list__item ele-upload-list__item-content"

v-for="(file, index) in fileList">

<el-link @click="downloadFile(file.fileId)" :underline="false">

<span class="el-icon-document"> {{ file.fileName }} </span>

</el-link>

<div class="ele-upload-list__item-content-action">

<el-link :underline="false" @click="handleDelete(index)" type="danger" v-show="canEdit">删除</el-link>

</div>

</li>

</transition-group>

</div>

</template>

<script>

import {getToken} from "@/utils/auth";

import {attachList, attachTypeList} from "@/api/lawyer/attach";

export default {

name: "FileUploadCustom",

props: {

// 数量限制

limit: {

type: Number,

default: 5,

},

// 大小限制(MB)

fileSize: {

type: Number,

default: 5,

},

// 文件类型

type: {

type: String

},

// 文件类型

canEdit: {

type: Boolean,

default: true

},

// 文件类型, 例如['png', 'jpg', 'jpeg']

fileType: {

type: Array,

default: () => ["doc", "xls", "ppt", "txt", "pdf", "png", "jpg", "jpeg"],

},

// 是否显示提示

isShowTip: {

type: Boolean,

default: true

},

//附件回显——案件主键

businessId: [String],

},

data() {

return {

number: 0,

uploadList: [],

uploadFileUrl: process.env.VUE_APP_BASE_API + "/attachment/file", // 上传的图片服务器地址

// downloadFileUrl: this.$download.downloadFile, // 下载的图片服务器地址

headers: {

Authorization: "Bearer " + getToken(),

},

fileList: [],

};

},

watch: {

businessId: {

handler(val) {

if (val) {

if (this.type != undefined) {

this.fileList = [];

this.uploadList = [];

this.attachTypeList(val);

} else {

console.log("监听" + this.val);

this.fileList = [];

this.uploadList = [];

this.attachList(val);

}

} else {

this.fileList = [];

this.uploadList = [];

}

},

deep: true,

immediate: true

}

},

computed: {

// 是否显示提示

showTip() {

return this.isShowTip && (this.fileType || this.fileSize);

},

},

methods: {

// 上传前校检格式和大小

handleBeforeUpload(file) {

// 校检文件类型

if (this.fileType) {

let fileExtension = "";

if (file.name.lastIndexOf(".") > -1) {

fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);

}

const isTypeOk = this.fileType.some((type) => {

if (file.type.indexOf(type) > -1) return true;

if (fileExtension && fileExtension.indexOf(type) > -1) return true;

return false;

});

if (!isTypeOk) {

this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);

return false;

}

}

// 校检文件大小

if (this.fileSize) {

const isLt = file.size / 1024 / 1024 < this.fileSize;

if (!isLt) {

this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);

return false;

}

}

this.$modal.loading("正在上传文件，请稍候...");

this.number++;

return true;

},

// 文件个数超出

handleExceed() {

this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);

},

// 上传失败

handleUploadError(err) {

this.$modal.msgError("上传图片失败，请重试");

this.$modal.closeLoading()

},

// 上传成功回调

handleUploadSuccess(res) {

this.uploadList.push(res);

if (this.uploadList.length === this.number) {

this.fileList = this.fileList.concat(this.uploadList);

this.uploadList = [];

this.number = 0;

this.$emit("input", this.fileList);

this.$modal.closeLoading();

}

},

// 删除文件

handleDelete(index) {

this.fileList.splice(index, 1);

this.$emit("input", this.fileList);

},

//查看列表

attachList(id) {

let type = this.type;

attachList(id, type).then(res => {

let list = [];

list = res;

for (let i = 0; i < list.length; i++) {

let file = {};

file.fileId = list[i].fileId;

file.fileName = list[i].fileName;

this.fileList.push(file);

}

})

},

//查看列表

attachTypeList(id) {

let type = this.type;

attachTypeList(id, type).then(res => {

let list = [];

list = res;

for (let i = 0; i < list.length; i++) {

let file = {};

file.fileId = list[i].fileId;

file.fileName = list[i].fileName;

this.fileList.push(file);

console.log(this.fileList)

}

})

},

downloadFile(fileId) {

this.$download.downloadFile(fileId)

}

}

};

</script>

<style scoped lang="scss">

.upload-file-uploader {

margin-bottom: 5px;

}

.upload-file-list .el-upload-list__item {

border: 1px solid #e4e7ed;

line-height: 2;

margin-bottom: 10px;

position: relative;

}

.upload-file-list .ele-upload-list__item-content {

display: flex;

justify-content: space-between;

align-items: center;

color: inherit;

}

.ele-upload-list__item-content-action .el-link {

margin-right: 10px;

}

</style>