|
|
@@ -6,6 +6,7 @@
|
|
|
action=""
|
|
|
:accept="accept"
|
|
|
:limit="limit"
|
|
|
+ :drag="drag"
|
|
|
:multiple="multiple"
|
|
|
:disabled="disabled"
|
|
|
show-file-list
|
|
|
@@ -17,37 +18,46 @@
|
|
|
:on-preview="handlePreview"
|
|
|
:on-exceed="handleExceed">
|
|
|
<slot>
|
|
|
- <el-button type="primary" :disabled="disabled">Click to upload</el-button>
|
|
|
+ <div v-if="drag" class="file-empty">
|
|
|
+ <el-icon><el-icon-upload-filled /></el-icon>
|
|
|
+ <h4>将文件拖到此处,或<el-text type="primary">点击上传</el-text></h4>
|
|
|
+ </div>
|
|
|
+ <el-button v-else type="primary" :disabled="disabled">Click to upload</el-button>
|
|
|
</slot>
|
|
|
<template #tip>
|
|
|
- <div v-if="tip" class="el-upload__tip">{{ tip }}</div>
|
|
|
+ <div v-if="tip" :class="['el-upload__tip', tipRequired && 'el-upload__tip-required']">{{ tip }}</div>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
<span style="display: none!important;"><el-input v-model="value"></el-input></span>
|
|
|
</div>
|
|
|
|
|
|
- <file-viewer v-if="showViewer" ref="fileViewer" @closed="showViewer = false"></file-viewer>
|
|
|
+ <file-viewer v-if="showViewer" ref="fileViewer" commonKey="minio" @closed="showViewer = false"></file-viewer>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
modelValue: { type: Array, default: () => [] },
|
|
|
+ apiKey: { type: String, default: "accept" },
|
|
|
tip: { type: String, default: "" },
|
|
|
+ tipRequired: { type: Boolean, default: false },
|
|
|
accept: { type: String, default: "" },
|
|
|
maxSize: { type: Number, default: 50 },
|
|
|
limit: { type: Number, default: 0 },
|
|
|
+ drag: { type: Boolean, default: false },
|
|
|
multiple: { type: Boolean, default: true },
|
|
|
disabled: { type: Boolean, default: false },
|
|
|
hideAdd: { type: Boolean, default: false },
|
|
|
- onSuccess: { type: Function, default: () => { return true } }
|
|
|
+ onSuccess: { type: Function, default: () => { return true } },
|
|
|
+ params: { type: Object, default: () => {} }
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
value: "",
|
|
|
defaultFileList: [],
|
|
|
-
|
|
|
showViewer: false
|
|
|
}
|
|
|
},
|
|
|
@@ -98,23 +108,17 @@ export default {
|
|
|
},
|
|
|
|
|
|
error(message) {
|
|
|
- this.$notify.error({ title: "上传文件未成功", message });
|
|
|
+ message && this.$notify.error({ title: "上传文件未成功", message });
|
|
|
},
|
|
|
|
|
|
- beforeRemove({ id, name, path }) {
|
|
|
- return this.$confirm(`是否移除 ${name}? 此操作不可逆!`, "提示", {
|
|
|
- type: "warning",
|
|
|
- confirmButtonText: "移除"
|
|
|
- }).then(() => {
|
|
|
- const entityID = id || path;
|
|
|
- this.$API.common.folder.rm(entityID).then(res => {
|
|
|
- if (res.code == 200) return true;
|
|
|
- else return false;
|
|
|
- }).catch(() => {
|
|
|
- return false;
|
|
|
- });
|
|
|
- }).catch(() => {
|
|
|
- return false;
|
|
|
+ beforeRemove(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$confirm(`是否移除 ${file.name}? 此操作不可逆!`, "提示", {
|
|
|
+ type: "warning",
|
|
|
+ confirmButtonText: "移除"
|
|
|
+ }).then(() => {
|
|
|
+ this.$API.common.minio.rm(file.path).then(res => resolve()).catch(() => reject());
|
|
|
+ }).catch(() => reject());
|
|
|
});
|
|
|
},
|
|
|
|
|
|
@@ -130,8 +134,9 @@ export default {
|
|
|
request(param) {
|
|
|
const data = new FormData();
|
|
|
data.append(param.filename, param.file);
|
|
|
-
|
|
|
- this.$API.common.folder.up(data, {
|
|
|
+ XEUtils.objectEach(this.params, (value, key) => data.append(key, value));
|
|
|
+
|
|
|
+ this.$API.common.minio[this.apiKey](data, {
|
|
|
onUploadProgress: e => {
|
|
|
const percent = parseInt(((e.loaded / e.total) * 100) | 0, 10);
|
|
|
param.onProgress({ percent });
|
|
|
@@ -142,9 +147,9 @@ export default {
|
|
|
return data;
|
|
|
}]
|
|
|
}).then(res => {
|
|
|
- if (res.code == 200) param.onSuccess({ path: res.expands.file, fileName: param.file.name, mineType: param.file.type })
|
|
|
- else param.onError(res.message || "未知错误");
|
|
|
- }).catch(err => param.onError(err));
|
|
|
+ if (res.code == 200) param.onSuccess({ path: res.expands.file, fileName: param.file.name, mineType: param.file.type });
|
|
|
+ else param.onError();
|
|
|
+ }).catch(() => param.onError());
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -152,38 +157,57 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.el-form-item.is-error .sc-upload-file:deep(.el-upload-dragger) {
|
|
|
- border-color: var(--el-color-danger);
|
|
|
+ border-color: var(--el-color-danger);
|
|
|
}
|
|
|
|
|
|
.sc-upload-file {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- :deep(.el-upload-list__item) {
|
|
|
- transition: none !important;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .el-upload-hide-add {
|
|
|
- :deep(.el-upload) {
|
|
|
- display: none;
|
|
|
+ :deep(.el-upload-list__item) {
|
|
|
+ transition: none !important;
|
|
|
}
|
|
|
|
|
|
- :deep(.el-upload-list) {
|
|
|
- margin-top: 0;
|
|
|
-
|
|
|
- .el-upload-list__item {
|
|
|
- &:hover {
|
|
|
- background-color: transparent;
|
|
|
+ .el-upload-hide-add {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
- .el-upload-list__item-info {
|
|
|
- width: 100%;
|
|
|
+ :deep(.el-upload-list) {
|
|
|
+ margin-top: 0;
|
|
|
+
|
|
|
+ .el-upload-list__item {
|
|
|
+ &:hover {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload-list__item-info {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload-list__item-status-label {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .el-upload-list__item-status-label {
|
|
|
- display: none;
|
|
|
+ .file-empty i {font-size: 28px;}
|
|
|
+ .file-empty h4 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #8c939d;
|
|
|
+
|
|
|
+ .el-text {font-size: inherit;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload__tip {color: #999;}
|
|
|
+ .el-upload__tip-required {
|
|
|
+ position: relative;
|
|
|
+ &::before {
|
|
|
+ content: "*";
|
|
|
+ margin-right: 4px;
|
|
|
+ color: var(--el-color-danger);
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|