|
|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
<div class="upload-file">
|
|
|
<el-upload
|
|
|
- multiple
|
|
|
- drag
|
|
|
- v-if="isShowUploadBtn"
|
|
|
- :action="uploadFileUrl"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- :on-error="uploadedSuccessfully"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
+ :disabled="disabled"
|
|
|
+ multiple
|
|
|
+ drag
|
|
|
+ v-if="isShowUploadBtn"
|
|
|
+ :action="uploadFileUrl"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :on-error="uploadedSuccessfully"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
:file-list="fileList"
|
|
|
:limit="limit"
|
|
|
:accept="accept"
|
|
|
@@ -23,14 +24,16 @@
|
|
|
<!-- <el-button size="mini" type="primary">{{ btnName }}</el-button> -->
|
|
|
<!-- 上传提示 -->
|
|
|
<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>
|
|
|
的文件
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
|
|
|
<!-- 详情页面显示列表 -->
|
|
|
- <transition-group v-if="!isShowUploadBtn" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
|
|
+ <transition-group v-if="!isShowUploadBtn" 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) in fileList">
|
|
|
<el-link :href="file.url.indexOf('http') > -1? file.url: imageUrl(file.url)" :underline="false" target="_blank">
|
|
|
<span class="el-icon-document"> {{ file.name }} </span>
|
|
|
@@ -41,8 +44,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getToken } from "@/utils/auth";
|
|
|
-import { upload } from "@/api/system/public";
|
|
|
+import {getToken} from "@/utils/auth";
|
|
|
+import {upload} from "@/api/system/public";
|
|
|
import {imageUrl} from "@/utils/ruoyi";
|
|
|
|
|
|
export default {
|
|
|
@@ -57,6 +60,10 @@ export default {
|
|
|
type: Number,
|
|
|
default: 5,
|
|
|
},
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
// 大小限制(MB)
|
|
|
fileSize: {
|
|
|
type: Number,
|
|
|
@@ -65,7 +72,7 @@ export default {
|
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
|
fileType: {
|
|
|
type: Array,
|
|
|
- default: () => ["pdf", "jpg", "png", "bmp","zip","rar","7z"],
|
|
|
+ default: () => ["pdf", "jpg", "png", "bmp", "zip", "rar", "7z"],
|
|
|
},
|
|
|
// 是否显示提示
|
|
|
isShowTip: {
|
|
|
@@ -91,12 +98,12 @@ export default {
|
|
|
Authorization: "Bearer " + getToken(),
|
|
|
},
|
|
|
fileList: [],
|
|
|
- fileValueList:[],
|
|
|
+ fileValueList: [],
|
|
|
accept: this.getAcceptByFileType()//".pdf,.jpg,.png,.bmp",
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
- defaultValue:{
|
|
|
+ defaultValue: {
|
|
|
handler(val) {
|
|
|
if (val) {
|
|
|
let temp = 1;
|
|
|
@@ -104,8 +111,7 @@ export default {
|
|
|
// 首先将值转为数组
|
|
|
const list = Array.isArray(val) ? val : this.value.split(',');
|
|
|
console.log("watch fileList", list)
|
|
|
- if(list.length>this.limit)
|
|
|
- {
|
|
|
+ if (list.length > this.limit) {
|
|
|
this.handleExceed();
|
|
|
return;
|
|
|
}
|
|
|
@@ -116,20 +122,19 @@ export default {
|
|
|
let itemObj = JSON.parse(item);
|
|
|
// console.log("watch fileList itemObj", itemObj)
|
|
|
if ('name' in itemObj && 'url' in itemObj) {
|
|
|
- item=itemObj
|
|
|
- }
|
|
|
- else {
|
|
|
- item = { name: item, url: item };
|
|
|
+ item = itemObj
|
|
|
+ } else {
|
|
|
+ item = {name: item, url: item};
|
|
|
}
|
|
|
}
|
|
|
item.uid = item.uid || new Date().getTime() + temp++;
|
|
|
return item;
|
|
|
});
|
|
|
- this.fileValueList=[...this.fileList];
|
|
|
+ this.fileValueList = [...this.fileList];
|
|
|
this.$emit("input", this.listToTagObj(this.fileValueList));
|
|
|
} else {
|
|
|
this.fileList = [];
|
|
|
- this.fileValueList=[];
|
|
|
+ this.fileValueList = [];
|
|
|
return [];
|
|
|
}
|
|
|
},
|
|
|
@@ -152,11 +157,9 @@ export default {
|
|
|
methods: {
|
|
|
imageUrl,
|
|
|
|
|
|
- getAcceptByFileType()
|
|
|
- {
|
|
|
- if(this.fileType)
|
|
|
- {
|
|
|
- let arr= this.fileType.map(x=> "."+x);
|
|
|
+ getAcceptByFileType() {
|
|
|
+ if (this.fileType) {
|
|
|
+ let arr = this.fileType.map(x => "." + x);
|
|
|
return arr.join(",");
|
|
|
}
|
|
|
return "";
|
|
|
@@ -184,10 +187,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if(this.fileList.findIndex(x=>x.name==file.name)>-1)
|
|
|
- {
|
|
|
+ if (this.fileList.findIndex(x => x.name == file.name) > -1) {
|
|
|
this.$modal.msgError(`不能上传相同名称的文件或图片!`);
|
|
|
- return false;
|
|
|
+ return false;
|
|
|
}
|
|
|
|
|
|
this.$modal.loading("正在上传文件,请稍候...");
|
|
|
@@ -204,32 +206,31 @@ export default {
|
|
|
this.$modal.closeLoading()
|
|
|
},
|
|
|
// 上传成功回调
|
|
|
- handleUploadSuccess(res, file,fileList) {
|
|
|
+ handleUploadSuccess(res, file, fileList) {
|
|
|
console.log("handleUploadSuccess", res, file, fileList);
|
|
|
- this.fileList=fileList;
|
|
|
+ this.fileList = fileList;
|
|
|
this.$emit("input", this.listToTagObj(this.fileValueList));
|
|
|
},
|
|
|
// 删除文件
|
|
|
handleDelete(item) {
|
|
|
if (item && item.status === "success") {
|
|
|
- console.log("handleDelete index",item)
|
|
|
- //this.fileList.splice(item, 1);
|
|
|
- // console.log("handleDelete",item,this.fileValueList)
|
|
|
+ console.log("handleDelete index", item)
|
|
|
+ //this.fileList.splice(item, 1);
|
|
|
+ // console.log("handleDelete",item,this.fileValueList)
|
|
|
|
|
|
- let index = this.fileValueList.findIndex(x=>x.name==item.name);
|
|
|
- // console.log("handleDelete",index,this.fileValueList)
|
|
|
- if(index>-1)
|
|
|
- {
|
|
|
- this.fileValueList.splice(index, 1);
|
|
|
+ let index = this.fileValueList.findIndex(x => x.name == item.name);
|
|
|
+ // console.log("handleDelete",index,this.fileValueList)
|
|
|
+ if (index > -1) {
|
|
|
+ this.fileValueList.splice(index, 1);
|
|
|
+ }
|
|
|
+ //this.fileValueList.splice(item, 1);
|
|
|
+ console.log("handleDelete deleted", this.fileValueList)
|
|
|
+ this.fileList = this.listToTagObj(this.fileValueList);
|
|
|
+ this.$emit("input", this.listToTagObj(this.fileValueList));
|
|
|
}
|
|
|
- //this.fileValueList.splice(item, 1);
|
|
|
- console.log("handleDelete deleted",this.fileValueList)
|
|
|
- this.fileList = this.listToTagObj(this.fileValueList);
|
|
|
- this.$emit("input", this.listToTagObj(this.fileValueList));
|
|
|
- }
|
|
|
},
|
|
|
// 上传失败结束处理 必须调用,否则失败文件也会显示
|
|
|
- uploadedSuccessfully(err,file,fileList) {
|
|
|
+ uploadedSuccessfully(err, file, fileList) {
|
|
|
},
|
|
|
// 获取文件名称
|
|
|
getFileName(name) {
|
|
|
@@ -250,14 +251,14 @@ export default {
|
|
|
uploadFile(fileObj) {
|
|
|
let formData = new FormData();
|
|
|
formData.append('file', fileObj.file);
|
|
|
- console.log("this.fileValueList.length",this.fileValueList.length)
|
|
|
- if (this.fileValueList.length<=this.limit){
|
|
|
+ console.log("this.fileValueList.length", this.fileValueList.length)
|
|
|
+ if (this.fileValueList.length <= this.limit) {
|
|
|
upload(formData).then(res => {
|
|
|
/*上传成功*/
|
|
|
this.$modal.closeLoading();
|
|
|
//let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
|
|
|
let arr = [];
|
|
|
- arr.push({ name: res.data.realName, url: res.data.url });
|
|
|
+ arr.push({name: res.data.realName, url: res.data.url});
|
|
|
this.fileValueList = this.fileValueList.concat(arr);
|
|
|
this.$modal.msgSuccess("上传成功!");
|
|
|
fileObj.onSuccess();
|
|
|
@@ -281,40 +282,39 @@ export default {
|
|
|
},
|
|
|
|
|
|
listToTagObj(list) {
|
|
|
- let tempArry=[];
|
|
|
+ let tempArry = [];
|
|
|
for (let i in list) {
|
|
|
// console.log("listToString2 i",i);
|
|
|
- tempArry.push(JSON.stringify( {url:list[i].url,name:list[i].name}));
|
|
|
+ tempArry.push(JSON.stringify({url: list[i].url, name: list[i].name}));
|
|
|
}
|
|
|
- console.log("listToString2",tempArry);
|
|
|
+ console.log("listToString2", tempArry);
|
|
|
return tempArry;
|
|
|
},
|
|
|
onPreview(file) {
|
|
|
- console.log(file);
|
|
|
- var name = file.name;
|
|
|
- let index = this.fileValueList.findIndex(x=>x.name==file.name);
|
|
|
- this.fileValueList[index]
|
|
|
- var url = this.fileValueList[index].url;
|
|
|
- if(process.env.VUE_APP_BASE_API!=='/')
|
|
|
- {
|
|
|
- url=process.env.VUE_APP_BASE_API+this.fileValueList[index].url;
|
|
|
- }
|
|
|
- // console.log("process.env.VUE_APP_BASE_API",process.env.VUE_APP_BASE_API,process)
|
|
|
+ console.log(file);
|
|
|
+ var name = file.name;
|
|
|
+ let index = this.fileValueList.findIndex(x => x.name == file.name);
|
|
|
+ this.fileValueList[index]
|
|
|
+ var url = this.fileValueList[index].url;
|
|
|
+ if (process.env.VUE_APP_BASE_API !== '/') {
|
|
|
+ url = process.env.VUE_APP_BASE_API + this.fileValueList[index].url;
|
|
|
+ }
|
|
|
+ // console.log("process.env.VUE_APP_BASE_API",process.env.VUE_APP_BASE_API,process)
|
|
|
|
|
|
- // console.log("process.env.VUE_APP_BASE_API url",url)
|
|
|
- const a = document.createElement("a");
|
|
|
- a.setAttribute("download", name);
|
|
|
- a.setAttribute("target", "_blank");
|
|
|
- a.setAttribute("href", url);
|
|
|
- a.click();
|
|
|
- },
|
|
|
- clearFiles(){
|
|
|
- if(this.$refs["fileUpload"])
|
|
|
- this.$refs["fileUpload"].clearFiles();
|
|
|
+ // console.log("process.env.VUE_APP_BASE_API url",url)
|
|
|
+ const a = document.createElement("a");
|
|
|
+ a.setAttribute("download", name);
|
|
|
+ a.setAttribute("target", "_blank");
|
|
|
+ a.setAttribute("href", url);
|
|
|
+ a.click();
|
|
|
+ },
|
|
|
+ clearFiles() {
|
|
|
+ if (this.$refs["fileUpload"])
|
|
|
+ this.$refs["fileUpload"].clearFiles();
|
|
|
|
|
|
- this.fileList = [];
|
|
|
- this.fileValueList = [];
|
|
|
- },
|
|
|
+ this.fileList = [];
|
|
|
+ this.fileValueList = [];
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|