panqihua
/
ttsbg-java-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复自定义组件`file-upload`无法显示第一个文件，列表显示的文件比实际文件少一个的问题

Browse Source
master
sam 3 years ago
parent 50236ae4e5
commit c491257359
1 changed files with 198 additions and 198 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 396
      ruoyi-ui/src/components/FileUpload/index.vue

396
ruoyi-ui/src/components/FileUpload/index.vue
Unescape View File

@ -1,198 +1,198 @@
<template> <template>
<div class="upload-file"> <div class="upload-file">
<el-upload <el-upload
:action="uploadFileUrl" :action="uploadFileUrl"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:file-list="fileList" :file-list="fileList"
:limit="limit" :limit="limit"
:on-error="handleUploadError" :on-error="handleUploadError"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:show-file-list="false" :show-file-list="false"
:headers="headers" :headers="headers"
class="upload-file-uploader" class="upload-file-uploader"
ref="upload" ref="upload"
> >
<!-- 上传按钮 --> <!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button> <el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip"> <div class="el-upload__tip" slot="tip" v-if="showTip">
请上传 请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件 的文件
</div> </div>
</el-upload> </el-upload>
<!-- 文件列表 --> <!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span> <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link> </el-link>
<div class="ele-upload-list__item-content-action"> <div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div> </div>
</li> </li>
</transition-group> </transition-group>
</div> </div>
</template> </template>
<script> <script>
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
export default { export default {
name: "FileUpload", name: "FileUpload",
props: { props: {
// 值 // 值
value: [String, Object, Array], value: [String, Object, Array],
// 数量限制 // 数量限制
limit: { limit: {
type: Number, type: Number,
default: 5, default: 5,
}, },
// 大小限制(MB) // 大小限制(MB)
fileSize: { fileSize: {
type: Number, type: Number,
default: 5, default: 5,
}, },
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: { fileType: {
type: Array, type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"], default: () => ["doc", "xls", "ppt", "txt", "pdf"],
}, },
// 是否显示提示 // 是否显示提示
isShowTip: { isShowTip: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
data() { data() {
return { return {
baseUrl: process.env.VUE_APP_BASE_API, baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: { headers: {
Authorization: "Bearer " + getToken(), Authorization: "Bearer " + getToken(),
}, },
fileList: [], fileList: [],
}; };
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
if (val) { if (val) {
let temp = 1; let temp = 1;
// 首先将值转为数组 // 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(','); const list = Array.isArray(val) ? val : this.value.split(',');
// 然后将数组转为对象数组 // 然后将数组转为对象数组
this.fileList = list.map(item => { this.fileList = list.map(item => {
if (typeof item === "string") { if (typeof item === "string") {
item = { name: item, url: item }; item = { name: item, url: item };
} }
item.uid = item.uid || new Date().getTime() + temp++; item.uid = item.uid || new Date().getTime() + temp++;
return item; return item;
}); });
} else { } else {
this.fileList = []; this.fileList = [];
return []; return [];
} }
}, },
deep: true, deep: true,
immediate: true immediate: true
} }
}, },
computed: { computed: {
// 是否显示提示 // 是否显示提示
showTip() { showTip() {
return this.isShowTip && (this.fileType || this.fileSize); return this.isShowTip && (this.fileType || this.fileSize);
}, },
}, },
methods: { methods: {
// 上传前校检格式和大小 // 上传前校检格式和大小
handleBeforeUpload(file) { handleBeforeUpload(file) {
// 校检文件类型 // 校检文件类型
if (this.fileType) { if (this.fileType) {
let fileExtension = ""; let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) { if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
} }
const isTypeOk = this.fileType.some((type) => { const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true; if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false; return false;
}); });
if (!isTypeOk) { if (!isTypeOk) {
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false; return false;
} }
} }
// 校检文件大小 // 校检文件大小
if (this.fileSize) { if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize; const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) { if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false; return false;
} }
} }
return true; return true;
}, },
// 文件个数超出 // 文件个数超出
handleExceed() { handleExceed() {
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
}, },
// 上传失败 // 上传失败
handleUploadError(err) { handleUploadError(err) {
this.$message.error("上传失败, 请重试"); this.$message.error("上传失败, 请重试");
}, },
// 上传成功回调 // 上传成功回调
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
this.$message.success("上传成功"); this.$message.success("上传成功");
this.fileList.push({ name: res.fileName, url: res.fileName }); this.fileList.push({ name: res.fileName, url: res.fileName });
this.$emit("input", this.listToString(this.fileList)); this.$emit("input", this.listToString(this.fileList));
}, },
// 删除文件 // 删除文件
handleDelete(index) { handleDelete(index) {
this.fileList.splice(index, 1); this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList)); this.$emit("input", this.listToString(this.fileList));
}, },
// 获取文件名称 // 获取文件名称
getFileName(name) { getFileName(name) {
if (name.lastIndexOf("/") > -1) { if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
} else { } else {
return ""; return "";
} }
}, },
// 对象转成指定字符串分隔 // 对象转成指定字符串分隔
listToString(list, separator) { listToString(list, separator) {
let strs = ""; let strs = "";
separator = separator || ","; separator = separator || ",";
for (let i in list) { for (let i in list) {
strs += list[i].url + separator; strs += list[i].url + separator;
} }
return strs != '' ? strs.substr(0, strs.length - 1) : ''; return strs != '' ? strs.substr(0, strs.length - 1) : '';
} }
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.upload-file-uploader { .upload-file-uploader {
margin-bottom: 5px; margin-bottom: 5px;
} }
.upload-file-list .el-upload-list__item { .upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;
line-height: 2; line-height: 2;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.upload-file-list .ele-upload-list__item-content { .upload-file-list .ele-upload-list__item-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: inherit; color: inherit;
} }
.ele-upload-list__item-content-action .el-link { .ele-upload-list__item-content-action .el-link {
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save