1

simple-demo/send_memos.html

@@ -33,7 +33,8 @@
             padding: 10px;
             background-color: white;
         }
-        body{
+
+        body {
             background-color: #f4f4f5;
         }
 
@@ -76,6 +77,7 @@
             <div style="display: flex;align-items:stretch; width: 70vw">
                 <!-- 创建一个用于编辑的容器 -->
                 <el-input
+                        @paste.native="handlePaste"
                         @keydown.enter.native="keyDown"
                         type="textarea"
                         :autosize={minRows:2}
@@ -83,8 +85,16 @@
                         @input="localStorage.setItem('contentStr', contentStr)"
                         v-model="contentStr">
                 </el-input>
+
                 <!-- 添加发送按钮 -->
                 <el-button style="margin-left: 20px; width: 10%; font-size: 2rem" @click="sendData" :disabled="!sendBtnAble">记录</el-button>
+            </div>
+            <el-image v-for="item in tmpFileIds"
+                      :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
+                      :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path']]"
+                      style="height: 200px; margin: 10px 10px 0 0; cursor: pointer"></el-image>
+            <div v-if="tmpFileIds.length>0">
+
             </div>
             <!-- 添加多选按钮 -->
             <el-checkbox-group v-model="tagChecked">
@@ -118,8 +128,8 @@
                     </div>
                     <div>
                         <el-image v-for="img in resourceMap[item.id]"
-                                  :src="'https://memos_assert.tianyunperfect.cn/' + img + '?width=150'"
-                                  :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + img]"
+                                  :src="'https://memos_assert.tianyunperfect.cn/' + img['internal_path'] + '?width=150'"
+                                  :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + img['internal_path']]"
                                   style="height: 200px; margin: 10px 10px 0 0; cursor: pointer">
 
                         </el-image>
@@ -158,9 +168,9 @@
                 <el-input ref="contentEdit" v-model="tmpItem.content" type="textarea" :autosize="{minRows: 2}"></el-input>
             </div>
             <div style="display: flex">
-                <div v-for="img in resourceMap[tmpItem.id]">
-                    <el-image :src="'https://memos_assert.tianyunperfect.cn/' + img + '?width=150'"
-                              :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + img]"
+                <div v-for="img in cloneFileIds">
+                    <el-image :src="'https://memos_assert.tianyunperfect.cn/' + img['internal_path'] + '?width=150'"
+                              :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + img['internal_path']]"
                               style="height: 200px; margin: 10px 10px 0 0; cursor: pointer">
                     </el-image>
                 </div>
@@ -204,6 +214,9 @@
             sendBtnAble: true,
             resourceMap: {}, // 资源map,
             commonTags: ['todo', '日记', '梦记', '美食', '备份', '歌曲', '电影', '随笔', '社会', '人生'],
+            upload_url: 'https://memos.tianyunperfect.cn/api/v1/resource/blob',
+            tmpFileIds: [],
+            cloneFileIds:[]
         },
         watch: {
             tagChecked: function () {
@@ -227,6 +240,75 @@
             this.search();
         },
         methods: {
+            getCloneResourceIds(id) {
+                let resourceMapElement = this.resourceMap[id];
+                if (resourceMapElement) {
+                    return JSON.parse(JSON.stringify(resourceMapElement))
+                }
+                return []
+            },
+            uploadFile(url, file, headers = {}) {
+                return new Promise((resolve, reject) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', url, true); // 使用异步的方式
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    for (const [key, value] of Object.entries(headers)) {
+                        xhr.setRequestHeader(key, value);
+                    }
+                    xhr.onload = function () {
+                        if (xhr.status === 200) {
+                            resolve(JSON.parse(xhr.responseText));
+                        } else {
+                            reject(new Error(xhr.statusText));
+                        }
+                    };
+                    xhr.onerror = function () {
+                        reject(new Error("Network Error"));
+                    };
+                    xhr.send(formData);
+                });
+            },
+            getFileFromPaste(e) {
+                let clipboardData = e.clipboardData; // IE
+                if (!clipboardData) {
+                    //chrome
+                    clipboardData = e.originalEvent.clipboardData;
+                }
+                let items = '';
+                items = (e.clipboardData || window.clipboardData).items;
+                let file = null;
+                if (!items || items.length === 0) {
+                    this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
+                    return;
+                }
+                // 搜索剪切板items
+                for (let i = 0; i < items.length; i++) {
+                    // 限制上传文件类型
+                    if (items[i].type.indexOf('image') !== -1) {
+                        file = items[i].getAsFile();
+                        break;
+                    }
+                }
+                // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
+                if (file) {
+                    return file;
+                }
+            },
+            handlePaste(e) {
+                let file = this.getFileFromPaste(e);
+                // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
+                if (file) {
+                    this.uploadFile(this.upload_url, file, {'Authorization': myHeaders['Authorization']}).then(res => {
+                        let fileId = res['id'];
+                        if (fileId) {
+                            let sourceRes = requestUtil.sync("https://web_history.tianyunperfect.cn/memos/resourceById", 'post', {ids: fileId}, {});
+                            let sourceRe = sourceRes['res'];
+                            this.tmpFileIds.push(...sourceRe)
+                        }
+                    });
+                }
+            },
             keyDown() {
                 // 如果是ctrl + enter \ meta + enter 则发送
                 if (event.ctrlKey || event.metaKey) {
@@ -325,6 +407,7 @@
             },
             edit(item) {
                 this.tmpItem = item;
+                this.cloneFileIds=this.getCloneResourceIds(item.id)
                 this.dialogVisible = true;
                 // 获取焦点
                 this.$nextTick(() => {
@@ -350,12 +433,13 @@
                 // updatedContent 去除尾部的\n,可能有多个
                 updatedContent = updatedContent.replace(/\n+$/, '');
 
-                let res = requestUtil.sync('https://memos.tianyunperfect.cn/api/v1/memo', 'post', {content: updatedContent}, myHeaders);
+                let res = requestUtil.sync('https://memos.tianyunperfect.cn/api/v1/memo', 'post', {content: updatedContent, "resourceIdList": this.tmpFileIds.map(it => it.id)}, myHeaders);
                 if (res['name']) {
                     // window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
                     this.msg('记录成功');
                     localStorage.setItem('contentStr', '');
                     this.contentStr = '';
+                    this.tmpFileIds = []
                     this.search();
                 }
                 this.sendBtnAble = true;
@@ -381,9 +465,9 @@
                 // 循环遍历，以memo_id为key，resource_name数组为value
                 sourceRes['res'].forEach(item => {
                     if (this.resourceMap[item['memo_id']]) {
-                        this.resourceMap[item['memo_id']].push(item['internal_path']);
+                        this.resourceMap[item['memo_id']].push(item);
                     } else {
-                        this.resourceMap[item['memo_id']] = [item['internal_path']];
+                        this.resourceMap[item['memo_id']] = [item];
                     }
                 });
             },