|
|
@@ -0,0 +1,202 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 面包屑，用来管理 首页>数据集管理>静态数据集，separator-class是设置面包屑中的分隔符>-->
|
|
|
+ <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item :to="{ path: '/visi-dataset' }">数据集管理</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>文件夹数据集</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ <!-- el-divider是分割线-->
|
|
|
+ <el-divider class="divi"></el-divider>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <div class="input-suffix">
|
|
|
+ <span>备注：</span>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2 }"
|
|
|
+ v-model="remark"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ class="input"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action=""
|
|
|
+ :on-change="handleChange"
|
|
|
+ :auto-upload="false"
|
|
|
+ multiple
|
|
|
+ ref="upload"
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件夹拖到此处，或
|
|
|
+ <em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <div class="tip" slot="tip">
|
|
|
+ <span style="margin:0 20px">注意：只允许上传一个文件夹</span>
|
|
|
+ <el-button @click="reset">重 置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <span class="bottom-element">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Message } from "element-ui";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "singleFileUpload",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataInfo: {
|
|
|
+ id: this.$store.state.user.id
|
|
|
+ },
|
|
|
+ fileList: [],
|
|
|
+ remark: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.upload.$children[0].$refs.input.webkitdirectory = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.$router.replace({ path: "/visi-dataset" });
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ if (this.fileList.length > 0) {
|
|
|
+ console.log("this.fileList :>> ", this.fileList);
|
|
|
+ const formData = new FormData();
|
|
|
+ // 遍历文件列表，添加每个文件到 formData 中
|
|
|
+ this.fileList
|
|
|
+ .filter((item) => {
|
|
|
+ return this.fileList[0].raw.webkitRelativePath.split("/")[0] === item.raw.webkitRelativePath.split("/")[0];
|
|
|
+ })
|
|
|
+ .forEach((file) => {
|
|
|
+ formData.append("files", file.raw);
|
|
|
+ });
|
|
|
+ // 将其他表单数据添加到 formData 对象中
|
|
|
+ let dataSet = {
|
|
|
+ datasetName: this.fileList[0].raw.webkitRelativePath.split("/")[0], // 获取文件夹名
|
|
|
+ uid: this.$store.state.user.id,
|
|
|
+ datasetStatus: 1,
|
|
|
+ remark: this.remark
|
|
|
+ };
|
|
|
+ console.log(dataSet);
|
|
|
+ formData.append("dataSet", JSON.stringify(dataSet));
|
|
|
+ const { data } = await this.$http({
|
|
|
+ url: this.$http.adornUrl("/dataset/staticup/uploadDir"),
|
|
|
+ method: "post",
|
|
|
+ data: formData,
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "multipart/form-data"
|
|
|
+ },
|
|
|
+ timeout: undefined
|
|
|
+ });
|
|
|
+ console.log("data :>> ", data);
|
|
|
+ Message({
|
|
|
+ message: "上传完毕",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ this.$router.replace({ path: "/visi-dataset" });
|
|
|
+ } else {
|
|
|
+ Message({
|
|
|
+ message: "请先上传一个文件",
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ if (this.fileList.length > 0) {
|
|
|
+ if (file.raw.webkitRelativePath.split("/")[0] !== this.fileList[0].raw.webkitRelativePath.split("/")[0]) {
|
|
|
+ this.$refs.upload.uploadFiles = this.fileList.filter((item) => {
|
|
|
+ return this.fileList[0].raw.webkitRelativePath.split("/")[0] === item.raw.webkitRelativePath.split("/")[0];
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.fileList.push(file);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.fileList.push(file);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ unique(arr) {
|
|
|
+ var ss = [];
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ // ss[i] = arr[i].categoryName
|
|
|
+ ss[i] = arr[i];
|
|
|
+ }
|
|
|
+ return Array.from(new Set(ss));
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.input-suffix {
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ width: 30vw;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.input-suffix span {
|
|
|
+ width: 100px;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.input {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+ height: 50vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.divi2 {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.divi {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 24px 0;
|
|
|
+ background-color: #dcdfe6;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-element {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 10%;
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.container >>> .el-upload-list .el-upload-list__item-name {
|
|
|
+ font-size: 20px; /* 设置文件名字体大小 */
|
|
|
+}
|
|
|
+
|
|
|
+.container >>> .el-upload-list .el-upload-list__item-actions {
|
|
|
+ font-size: 14px; /* 设置操作按钮字体大小 */
|
|
|
+}
|
|
|
+</style>
|
