From 6259692bd6cc4c8d14e93649931c15105df7b389 Mon Sep 17 00:00:00 2001
From: wen <1515>
Date: Tue, 25 Oct 2022 01:28:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.js                         |   9 ++
 src/layout/components/Sidebar/index.vue |   2 +-
 src/views/subfile/index.vue             | 158 ++++++++++++++++++------
 3 files changed, 131 insertions(+), 38 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index fb77191..1d783f4 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -32,4 +32,13 @@ export function mkdir(datas) {
         method: 'post',
         data: datas
     })
+}
+
+// 上传文件
+export function uploadrequest(datas) {
+    return request({
+        url: '/api/uploadbase64',
+        method: 'post',
+        data: datas
+    })
 }
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 4bb30fd..8a768b1 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -110,7 +110,7 @@ export default {
 
      getmunusdata() {
         let thiss = this;
-        console.log(1);
+        //console.log(1);
         // console.log(this.$store);
        
         mirlist().then(response => {
diff --git a/src/views/subfile/index.vue b/src/views/subfile/index.vue
index da38b36..4395e4f 100644
--- a/src/views/subfile/index.vue
+++ b/src/views/subfile/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="subfile_main" v-loading="subloading">
-		<div class="block">
+		<!-- <div class="block">
 			<el-date-picker
 			v-model="value2"
 			type="daterange"
@@ -12,7 +12,7 @@
 			:picker-options="pickerOptions">
 			</el-date-picker>
 			<el-button class="sou_bottom" type="primary" icon="el-icon-search">搜索</el-button>
-		</div>
+		</div> -->
 		<div>
 			<!-- 目录数据列表 -->
             <div class="folder_bottom">
@@ -24,7 +24,7 @@
                 <el-button type="primary" icon="el-icon-edit" @click="dirbox = true">创建目录</el-button>
 				<el-button type="primary" icon="el-icon-edit" @click="rmdirm">删除目录</el-button>
                 <el-button type="primary" icon="el-icon-edit">重命名</el-button>
-                <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
+                <el-button type="primary" @click="drawer = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
             </div>
 
 			<!-- 文件数据列表 -->
@@ -81,13 +81,41 @@
                 </div>
         </el-dialog>
 		</div>
+		<el-drawer
+			title="上传图片"
+			:visible.sync="drawer"
+			:direction="direction"
+			size="100%"
+			>
+			<el-upload
+				action=""
+				:limit="1"
+				list-type="picture-card"
+				:on-remove="handleRemove"
+				:on-exceed="fileexceed"
+				:multiple="false"
+				:on-change="filechange"
+				:on-preview="handlePictureCardPreview"
+				accept=".jpg, .jpeg, .png, .gif"
+				:auto-upload="false">
+					<i slot="default" class="el-icon-plus"></i>
+					<span class="addimgtext">添加照片</span>
+				</el-upload>
+				<div class="request_main">
+					<el-button type="success" @click="UploadRequest(file)">开始上传<i class="el-icon-upload el-icon--right"></i></el-button>
+				</div>
+				 <div class="el-upload__tip">只能上传.jpg, .jpeg, .png, .gif文件，且不超过500kb</div>
+				<el-dialog :visible.sync="dialogVisible">
+					<img width="100%" :src="dialogImageUrl" alt="图片">
+				</el-dialog>
+		</el-drawer>
   </div>
 </template>
 
 <script>
 
 import EventBus from '@/utils/EventBus.js'
-import { mirlist, mkdir } from '@/api/user'
+import { mirlist, mkdir, uploadrequest} from '@/api/user'
 import defaultSettings from '@/settings.js'
 
 export default {
@@ -114,34 +142,35 @@ export default {
   },
   data() {
     return {
-        pickerOptions: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value2: '',
+		// 按日期查询
+        // pickerOptions: {
+        //   shortcuts: [{
+        //     text: '最近一周',
+        //     onClick(picker) {
+        //       const end = new Date();
+        //       const start = new Date();
+        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        //       picker.$emit('pick', [start, end]);
+        //     }
+        //   }, {
+        //     text: '最近一个月',
+        //     onClick(picker) {
+        //       const end = new Date();
+        //       const start = new Date();
+        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        //       picker.$emit('pick', [start, end]);
+        //     }
+        //   }, {
+        //     text: '最近三个月',
+        //     onClick(picker) {
+        //       const end = new Date();
+        //       const start = new Date();
+        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        //       picker.$emit('pick', [start, end]);
+        //     }
+        //   }]
+        // },
+        // value2: '',
 
         tableData: [],
 
@@ -157,10 +186,61 @@ export default {
 		dirdata: [],
 
 		subloading: false,  //切换目录loading
-		mkdirloadings: false
+		mkdirloadings: false,
+
+		// 图片上传弹出框数据
+		drawer: false,
+        direction: 'ttb',
+
+		// 图片上传相关数据
+		dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false
       };
   },
   methods: {
+	// 图片上传相关函数
+	handleRemove(file, fileList) {
+        //this.$refs.upload.clearFiles;
+	},
+	handlePictureCardPreview(file) {
+		this.dialogImageUrl = file.url;
+		this.dialogVisible = true;
+	},
+	handleDownload(file) {
+		this.$message({
+			showClose: true,
+			message: '右键点击或者长按图片自行下载'
+		});
+	},
+	// 超出上传文件个数限制处理函数
+	fileexceed(files, fileList) {
+		this.$message({showClose:true, message:'一次只能上传一个文件', type:'warning'});
+	},
+
+	filechange(files, fileList) {
+		console.log(files);
+		console.log(fileList);
+	},
+
+	UploadRequest(file) {
+		let thiss = this;
+		console.log(file);
+		uploadrequest().then(response => {
+			let datamain = response.data;
+			
+			
+		}).catch(function (error) {
+			if (error.response) {
+				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
+			} else if (error.request) {
+				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
+			} else {
+				thiss.$message({showClose: true,message: error.response.data.err,type: 'error'});
+			}
+			
+		});
+	},
     getFileData() {
         let can = {};
 		const menusindex = window.location.href
@@ -191,7 +271,6 @@ export default {
 				this.subloading = false;
 				
 			}
-			
 		}).catch(function (error) {
 			thiss.$message({
 				showClose: true,
@@ -270,13 +349,18 @@ export default {
 
 <style lang="scss">
 .subfile_main{
-    padding:26px 5% 12px 5%;
+    padding:26px 5% 47px 5%;
     .block{margin:0 0 28px 0;}
     .sou_bottom{margin-left:10px;}
     .use_button{margin:15px 0 16px 0;}
+	// .use_button>button{margin:0 10px 10px 0;}
     .file_caozuo2{margin:6px 0 0 0;}
     .el-table td{padding:9px 0}
 	.folder_bottom a{margin:0 6px;}
-	.el-table__body-wrapper img{width:100px;}
-}
+	.el-table__body-wrapper img{width:100px;height:71px;}
+	.el-drawer__body{text-align:center;padding:0 10% 20px 10%;}
+	.request_main{text-align:center;margin:12px 0;}
+	.addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;}
+	.el-upload--picture-card i{vertical-align:middle;}
+}	
 </style>