|
|
|
|
@ -17,17 +17,33 @@
|
|
|
|
|
>
|
|
|
|
|
<!-- 上传按钮 -->
|
|
|
|
|
<slot v-if="fileList.length == 0"></slot>
|
|
|
|
|
|
|
|
|
|
</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.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">
|
|
|
|
|
<transition-group
|
|
|
|
|
class="upload-file-list el-upload-list el-upload-list--text"
|
|
|
|
|
name="el-fade-in-linear"
|
|
|
|
|
tag="ul"
|
|
|
|
|
>
|
|
|
|
|
<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"
|
|
|
|
|
>
|
|
|
|
|
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
|
|
|
|
</el-link>
|
|
|
|
|
<div class="ele-upload-list__item-content-action" v-if="$route.query.pageType != 'look'">
|
|
|
|
|
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
|
|
|
|
<div
|
|
|
|
|
class="ele-upload-list__item-content-action"
|
|
|
|
|
v-if="$route.query.pageType != 'look'"
|
|
|
|
|
>
|
|
|
|
|
<el-link :underline="false" @click="handleDelete(index)" type="danger"
|
|
|
|
|
>删除</el-link
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</transition-group>
|
|
|
|
|
@ -60,17 +76,17 @@ export default {
|
|
|
|
|
// 是否显示提示
|
|
|
|
|
isShowTip: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true
|
|
|
|
|
}
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
number: 0,
|
|
|
|
|
uploadList: [],
|
|
|
|
|
// baseUrl: process.env.VUE_APP_BASE_API,
|
|
|
|
|
baseUrl: location.origin + '/api',
|
|
|
|
|
// uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
|
|
|
|
|
uploadFileUrl: location.origin + '/api/common/upload',
|
|
|
|
|
baseUrl: process.env.VUE_APP_BASE_API,
|
|
|
|
|
// baseUrl: location.origin + '/api',
|
|
|
|
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
|
|
|
|
|
// uploadFileUrl: location.origin + '/api/common/upload',
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: "Bearer " + getToken(),
|
|
|
|
|
},
|
|
|
|
|
@ -83,9 +99,9 @@ export default {
|
|
|
|
|
if (val) {
|
|
|
|
|
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") {
|
|
|
|
|
item = { name: item, url: item };
|
|
|
|
|
}
|
|
|
|
|
@ -98,8 +114,8 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// 是否显示提示
|
|
|
|
|
@ -112,17 +128,19 @@ export default {
|
|
|
|
|
handleBeforeUpload(file) {
|
|
|
|
|
// 校检文件类型
|
|
|
|
|
if (this.fileType) {
|
|
|
|
|
const fileName = file.name.split('.');
|
|
|
|
|
const fileName = file.name.split(".");
|
|
|
|
|
const fileExt = fileName[fileName.length - 1];
|
|
|
|
|
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
|
|
|
|
if (!isTypeOk) {
|
|
|
|
|
this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`);
|
|
|
|
|
this.$modal.msgError(
|
|
|
|
|
`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`
|
|
|
|
|
);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 校检文件名是否包含特殊字符
|
|
|
|
|
if (file.name.includes(',')) {
|
|
|
|
|
this.$modal.msgError('文件名不正确，不能包含英文逗号!');
|
|
|
|
|
if (file.name.includes(",")) {
|
|
|
|
|
this.$modal.msgError("文件名不正确，不能包含英文逗号!");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// 校检文件大小
|
|
|
|
|
@ -152,13 +170,13 @@ export default {
|
|
|
|
|
this.uploadList.push({ name: res.fileName, url: res.fileName });
|
|
|
|
|
this.uploadedSuccessfully();
|
|
|
|
|
} else if (res.code == 401) {
|
|
|
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
|
|
|
this.$store.dispatch("LogOut").then(() => {
|
|
|
|
|
// location.href = '/login';
|
|
|
|
|
this.$modal.msgError(res.msg);
|
|
|
|
|
this.$modal.closeLoading();
|
|
|
|
|
this.uploadedSuccessfully();
|
|
|
|
|
this.$router.replace("/login");
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.number--;
|
|
|
|
|
this.$modal.closeLoading();
|
|
|
|
|
@ -198,9 +216,9 @@ export default {
|
|
|
|
|
for (let i in list) {
|
|
|
|
|
strs += list[i].url + separator;
|
|
|
|
|
}
|
|
|
|
|
return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return strs != "" ? strs.substr(0, strs.length - 1) : "";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
