From 58e6f0bb283d07c74f12ebcf57f0aa3df4c78406 Mon Sep 17 00:00:00 2001
From: mengyxu <kekeningxiaobai@sina.com>
Date: Fri, 7 Jan 2022 17:42:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.新增复制地址为MarkDown语法
2.新增更新图片内容
---
 .../xumy/picture/ctrl/PictureController.java  | 12 +++-
 .../xumy/picture/service/PictureService.java  | 11 ++-
 vue/src/static/plugins/axios.ts               | 11 ++-
 vue/src/views/biz/picture.vue                 | 68 +++++++++++++++----
 4 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/java/src/main/java/vip/xumy/picture/ctrl/PictureController.java b/java/src/main/java/vip/xumy/picture/ctrl/PictureController.java
index 985e641..996e77d 100644
--- a/java/src/main/java/vip/xumy/picture/ctrl/PictureController.java
+++ b/java/src/main/java/vip/xumy/picture/ctrl/PictureController.java
@@ -44,7 +44,7 @@ public class PictureController {
 		if (userId == null) {
 			rsp.setRows(new ArrayList<Picture>());
 			rsp.setTotal(0L);
-		}else {
+		} else {
 			example.setUser(userId);
 			Page<Picture> pages = PageHelper.startPage(example.getPage(), example.getSize());
 			List<Picture> list = pictureService.list(example);
@@ -57,7 +57,7 @@ public class PictureController {
 	@PostMapping
 	public AjaxResponse save(MultipartFile file, HttpServletRequest request) throws CoreException {
 		String userId = MyUserController.getUserId(request);
-		if(userId == null) {
+		if (userId == null) {
 			return AjaxResponse.failed("请先登录");
 		}
 		pictureService.save(file, userId);
@@ -66,7 +66,13 @@ public class PictureController {
 
 	@PutMapping
 	public AjaxResponse update(@RequestBody Picture picture) throws CoreException {
-		pictureService.update(picture);
+		pictureService.update(null, picture);
+		return new AjaxResponse(true, "更新成功");
+	}
+
+	@PostMapping("img")
+	public AjaxResponse updateImg(MultipartFile file, Picture picture) throws CoreException {
+		pictureService.update(file, picture);
 		return new AjaxResponse(true, "更新成功");
 	}
 
diff --git a/java/src/main/java/vip/xumy/picture/service/PictureService.java b/java/src/main/java/vip/xumy/picture/service/PictureService.java
index d9ae9d1..9951ac8 100644
--- a/java/src/main/java/vip/xumy/picture/service/PictureService.java
+++ b/java/src/main/java/vip/xumy/picture/service/PictureService.java
@@ -83,7 +83,16 @@ public class PictureService {
 		}
 	}
 
-	public void update(Picture picture) {
+	public void update(MultipartFile file, Picture picture) throws CoreException {
+		if(file != null) {
+			byte[] data;
+			try {
+				data = file.getBytes();
+				writeToFile(picture.getPath(), data);
+			} catch (IOException e) {
+				throw new CoreException("图片上传失败");
+			}
+		}
 		pictureMapper.update(picture);
 	}
 
diff --git a/vue/src/static/plugins/axios.ts b/vue/src/static/plugins/axios.ts
index f970b79..94a9c5e 100644
--- a/vue/src/static/plugins/axios.ts
+++ b/vue/src/static/plugins/axios.ts
@@ -98,7 +98,6 @@ function put(url, data = {}, noMsg, noLoading) {
     if(!noLoading){
       loading.start();
     }
-    console.log(url);
     _axios.put(url, data).then(
       (response: any) => {
         handResponse(response, resolve, noMsg, noLoading);
@@ -165,11 +164,17 @@ function handError(err, reject, noMsg, noLoading){
   reject(err);
 }
 
-function upload(file, url){
+function upload(file, url, data){
   return new Promise((resolve, reject) => {
     let param = new FormData()  // 创建form对象
     param.append('file', file)  // 通过append向form对象添加数据
-    param.append('chunk', '0') // 添加form表单中其他数据
+    if(data){
+      for (const item in data) {
+        if (data.hasOwnProperty(item)) {
+          param.append(item, data[item]) // 添加form表单中其他数据
+        }
+      }
+    }
     let config = {
       headers: {'Content-Type': 'multipart/form-data'}
     }
diff --git a/vue/src/views/biz/picture.vue b/vue/src/views/biz/picture.vue
index 7e95475..0a1c0f2 100644
--- a/vue/src/views/biz/picture.vue
+++ b/vue/src/views/biz/picture.vue
@@ -2,8 +2,8 @@
   <div id="picture">
     <MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)">
       <template slot="header">
-        <el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false"
-          :show-file-list="false">
+        <el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess"
+          :multiple="false" :show-file-list="false">
           <el-button :size="$store.state.size" type="success" icon="el-icon-upload">
             上传图片
           </el-button>
@@ -13,9 +13,10 @@
     <el-row class="image-list" :style="{ height: $store.state.sizes.pTableHei + 'px' }">
       <el-col v-for="(item, index) in result.rows" :xs="8" :sm="7" :md="6" :xl="4">
         <el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()"
-          :subTitle="item.time + '   ' + item.space + '  ' + (item.remark ? item.remark : '')">
+          :subTitle="item.time + '   ' + item.space">
           <template slot="icon">
-            <el-image class="image" :src="$store.state.conf.host + '/' + item.path" :preview-src-list="srcList">
+            <el-image @contextmenu="modify(item)" class="image" :src="$store.state.conf.host + '/' + item.path"
+              :preview-src-list="srcList">
             </el-image>
           </template>
           <template slot="extra">
@@ -30,6 +31,18 @@
       layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange"
       @current-change="handleCurrentChange" />
 
+    <el-dialog :title="row.path" :visible.sync="flag.modify" :close-on-click-modal="false" width="30%">
+      <el-button :plain="true" type="info" style="width:100%" @click="copy(row, true)">复制为MarkDown语法
+      </el-button>
+      <br><br>
+      <el-button :plain="true" type="success" style="width:100%">
+        <el-upload class="update-btn" ref="update" :data="row" :action="updateImgUrl" :on-error="onError"
+          :on-success="onSuccess" :multiple="false" :show-file-list="false">
+          更新图片内容(ctrl+v)
+        </el-upload>
+      </el-button>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -50,13 +63,16 @@
   })
   export default class Picture extends Vue {
     url = 'picture';
+    imgUrl = 'picture/img';
     uploadUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.url;
+    updateImgUrl = (process.env.VUE_APP_BASE_URL ? "/api/" : "/") + this.imgUrl;
     flag = {
       list: true,
       save: false,
       update: false,
       del: true,
-      title: true
+      title: true,
+      modify: false
     }
     terms = [{
       code: 'remark',
@@ -76,7 +92,7 @@
     }]
 
     srcList = [];
-
+    row = {};
     example = {
       page: 1,
       size: 20
@@ -114,14 +130,19 @@
       })
     }
 
-    copy(row) {
+    copy(row, md) {
       const that = this;
       const host = this.$store.state.conf.host;
-      const path = 'http://' + host + "/" + row.path;
+      let path = 'http://' + host + "/" + row.path;
+      if (md) {
+        path = "![](" + path + ")";
+      }
       this.$copyText(path).then(e => {
         that.$showMessage("success", "复制成功");
+        that.flag.modify = false;
       }, e => {
         that.$showMessage("success", "复制失败");
+        that.flag.modify = false;
       })
     }
 
@@ -154,6 +175,18 @@
       }).catch(() => {})
     }
 
+    modify(row) {
+      this.flag.modify = true;
+      this.row = row;
+      // 去掉默认事件
+      const that = this;
+      document.oncontextmenu = function(e) {
+        if(that.flag.modify){
+          e.preventDefault();
+        }
+      };
+    }
+
     delate(row) {
       const that = this
       this.$confirm('确定要删除该图片吗？', '提示', {
@@ -176,12 +209,12 @@
       console.log(err);
     }
     onSuccess(response, file, fileList) {
-      const that = this;
       if (response.success == false) {
-        that.$showMessage('error', response.message, true);
+        this.$showMessage('error', response.message, true);
       } else {
-        that.query();
-        that.$showMessage('success', response.message, true)
+        this.$showMessage('success', response.message, true)
+        this.query();
+        this.flag.modify = true;
       }
       this.$refs.upload.clearFiles();
     }
@@ -204,8 +237,15 @@
           cancelButtonText: '不用',
           type: 'warning'
         }).then(() => {
-          this.$upload(file, this.url).then(rsp => {
-            if(rsp){
+          let data = null;
+          let url = this.url;
+          if (that.flag.modify) {
+            data = this.row;
+            url = this.imgUrl;
+          }
+          this.$upload(file, url, data).then(rsp => {
+            if (rsp) {
+              that.flag.modify = true;
               that.query();
             }
           });