|
|
@@ -64,6 +64,7 @@
|
|
|
<link rel="stylesheet" href="elementUI/index.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
+
|
|
|
<div id="app">
|
|
|
<div id="all">
|
|
|
<div class="myTop">
|
|
|
@@ -100,9 +101,21 @@
|
|
|
</div>
|
|
|
<div style="display: flex">
|
|
|
<div v-for="item in tmpFileIds">
|
|
|
- <el-image :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
|
|
|
+ <el-image v-if="item['type'].startsWith('image')"
|
|
|
+ :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
|
|
|
:preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
|
|
|
class="img"></el-image>
|
|
|
+ <audio controls v-if="item['type'].startsWith('audio')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/ogg">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/mpeg">
|
|
|
+ 您的浏览器不支持 audio 元素。
|
|
|
+ </audio>
|
|
|
+ <video width="320" height="240" controls v-if="item['type'].startsWith('video')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/mp4">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/ogg">
|
|
|
+ 您的浏览器不支持 HTML5 video 元素。
|
|
|
+ </video>
|
|
|
+ <el-link v-if="item['type'].startsWith('application')" :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" target="_blank">{{item['filename']}}</el-link>
|
|
|
<div @click="removeTmp(item)">删除</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -139,12 +152,25 @@
|
|
|
<el-input v-model="item.content" type="textarea" :autosize="{minRows: 1}" readonly="true"></el-input>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-image v-for="img in resourceMap[item.id]"
|
|
|
- :src="'https://memos_assert.tianyunperfect.cn/' + img['internal_path'] + '?width=150'"
|
|
|
- :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + img['internal_path'] + '?width=750']"
|
|
|
- class="img">
|
|
|
+ <div v-for="item in resourceMap[item.id]">
|
|
|
+ <el-image v-if="item['type'].startsWith('image')"
|
|
|
+ :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
|
|
|
+ :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
|
|
|
+ class="img">
|
|
|
+ </el-image>
|
|
|
+ <audio controls v-if="item['type'].startsWith('audio')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/ogg">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/mpeg">
|
|
|
+ 您的浏览器不支持 audio 元素。
|
|
|
+ </audio>
|
|
|
+ <video width="320" height="240" controls v-if="item['type'].startsWith('video')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/mp4">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/ogg">
|
|
|
+ 您的浏览器不支持 HTML5 video 元素。
|
|
|
+ </video>
|
|
|
+ <el-link v-if="item['type'].startsWith('application')" :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" target="_blank">{{item['filename']}}</el-link>
|
|
|
+ </div>
|
|
|
|
|
|
- </el-image>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="4" style="display: flex">
|
|
|
@@ -182,11 +208,23 @@
|
|
|
ref="contentEdit" v-model="tmpItem.content" type="textarea" :autosize="{minRows: 2}"></el-input>
|
|
|
</div>
|
|
|
<div style="display: flex">
|
|
|
- <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'] + '?width=750']"
|
|
|
+ <div v-for="item in cloneFileIds">
|
|
|
+ <el-image v-if="item['type'].startsWith('image')"
|
|
|
+ :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
|
|
|
+ :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
|
|
|
class="img">
|
|
|
</el-image>
|
|
|
+ <audio controls v-if="item['type'].startsWith('audio')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/ogg">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="audio/mpeg">
|
|
|
+ 您的浏览器不支持 audio 元素。
|
|
|
+ </audio>
|
|
|
+ <video width="320" height="240" controls v-if="item['type'].startsWith('video')">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/mp4">
|
|
|
+ <source :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" type="video/ogg">
|
|
|
+ 您的浏览器不支持 HTML5 video 元素。
|
|
|
+ </video>
|
|
|
+ <el-link v-if="item['type'].startsWith('application')" :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']" target="_blank">{{item['filename']}}</el-link>
|
|
|
<div @click="delPic(img)">删除</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -199,7 +237,6 @@
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 引入Quill库 -->
|
|
|
<!--<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>-->
|
|
|
<!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
|
|
|
@@ -272,7 +309,7 @@
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- removeTmp(item){
|
|
|
+ removeTmp(item) {
|
|
|
// tmpFileIds 根据id删除
|
|
|
let index = this.tmpFileIds.findIndex(item => item.id === item.id);
|
|
|
if (index !== -1) {
|
tianyun