0
点赞
收藏
分享

微信扫一扫

element-ui 文件上传多个


 

 

<template>
<div>
<el-upload
ref="upload"
:action="action"
:limit="5"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:disabled="disabled"
:on-preview="hanleOnpreview"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
可以上传jpg/png/Jpeg/word/pdf/excel等格式文件,单个文件不可超过5M,附件不可超过5个
</div>
</el-upload>
</div>
</template>

<script>
// /file/download
// 下载

import { fileDownload } from "@/api/announcement-manage";
export default {
props: {
file: {
type: Array,
default: () => {
return [];
},
},
uploadType: {
type: String,
default: () => {
return "";
},
},
disabled: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
// action: "https://www.xwqyy.com/filemanage/file/upload?project=customer",
action: this.$util.baseUrl + "/sdfs/file/uploadFile", // 上传图片的url
fileList: [],
};
},
mounted() {
this.fileList = this.file.length > 0 ? this.file : [];
},
watch: {
file: {
handler(newData, oldData) {
this.fileList = newData.length > 0 ? newData : [];
},
deep: true,
},
},
methods: {
handleRemove(file, fileList) {
console.log("file111", fileList);
for (let item of fileList) {
item.fileName = item.name;
item.filePath = item.url;
}
if (this.uploadType == "fileList") {
console.log("file222", fileList);
this.$emit("getFileList", fileList);
}
},
handleSuccess(res, file, fileList) {
// res.data.name = res.data.fileName;
// res.data.url = res.data.filePath;
// this.fileList.push(res.data);
let imgarr = [];
for (let item of fileList) {
item.fileName = res.data.fileName;
item.filePath = res.data.filePath;
imgarr = fileList;
}
if (this.uploadType == "fileList") {
this.$emit("getFileList", imgarr);
}
},
beforeUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error("上传图片大小不能超过5MB!");
}
return isLt5M;
},
handleExceed(files, fileList) {
this.$message.warning("附件不能超过5个");
},
//点击下载
hanleOnpreview(file) {
fileDownload({
filePath: file.url,
}).then((res) => {
this.downFile(res.data, file.name);
});
},
//下载乱码转换
downFile(content, fileName) {
const dom = document.createElement("a"); // 隐藏的a标签,href为输出流
const blob = new Blob([content], {
type: "application/vnd.ms-excel", // 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
});
const url = window.URL.createObjectURL(blob); // 生成一个Blob对象
dom.style.display = "none";
dom.href = url;
document.body.appendChild(dom);
dom.setAttribute("download", fileName);
dom.click();
document.body.removeChild(dom);
URL.revokeObjectURL(url);
},
},
};
</script>

<style lang="less">
.disabled .el-upload--picture-card {
display: none;
}
</style>

 



举报

相关推荐

element-ui 文件上传

Element-UI

element-UI

Element-ui

element-ui vue

element-ui配置

0 条评论