From e5966e298af1a375ddeb439d4b1768f48e8fee50 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 11 四月 2024 11:24:25 +0800
Subject: [PATCH] 上传文件组件编写
---
Source/ProjectWeb/src/views/custom-ui/test.vue | 234 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 229 insertions(+), 5 deletions(-)
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index 6b3584e..927ace7 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/Source/ProjectWeb/src/views/custom-ui/test.vue
@@ -1,15 +1,239 @@
<template>
- <div>
- 娴嬭瘯鑷畾涔夌粍浠跺睍绀篸dddd
- </div>
+ <div id='quillEditorQiniu'>
+ <el-button @click="visible = true">涓婁紶鏂囦欢</el-button>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin-->
+ <el-upload
+ :accept="'image'"
+ :action="uploadImgUrl"
+ :before-upload="beforeEditorUpload"
+ :headers="headers"
+ :on-error="uploadEditorError"
+ :on-success="uploadEditorSuccess"
+ :show-file-list="false"
+ class="avatar-uploader">
+ </el-upload>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
+ <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
+ </quill-editor>
+ <UploadFiles :visible.sync="visible"></UploadFiles>
+ </div>
</template>
<script>
+import {getToken} from "@/util/auth";
+
+const toolbarOptions = [
+ ['bold', 'italic', 'underline', 'strike'], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ['blockquote', 'code-block'], // 寮曠敤 浠ｇ爜鍧�
+ [{header: 1}, {header: 2}], // 1銆�2 绾ф爣棰�
+ [{list: 'ordered'}, {list: 'bullet'}], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{script: 'sub'}, {script: 'super'}], // 涓婃爣/涓嬫爣
+ [{indent: '-1'}, {indent: '+1'}], // 缂╄繘
+ [{size: ['small', false, 'large', 'huge']}], // 瀛椾綋澶у皬
+ [{header: [1, 2, 3, 4, 5, 6, false]}], // 鏍囬
+ [{color: []}, {background: []}], // 瀛椾綋棰滆壊 瀛椾綋鑳屾櫙棰滆壊
+ [{font: []}], // 瀛椾綋绉嶇被
+ [{align: []}], // 瀵归綈鏂瑰紡
+ ['link', 'image'], // 閾炬帴 鍥剧墖
+ ['clean'] // 娓呴櫎鏂囨湰鏍煎紡
+];
export default {
- name: "test"
+ data() {
+ return {
+ visible:false,
+ headers: {
+ Authorization: "Bearer " + getToken(),
+ },
+ uploadImgUrl: "/v1/admin/common/upload",
+ uploadUrlPath: "娌℃湁鏂囦欢涓婁紶",
+ quillUpdateImg: false,
+ content: '', //鏈�缁堜繚瀛樼殑鍐呭
+ editorOption: {
+ theme: 'snow',
+ placeholder: '璇疯緭鍏ュ唴瀹�',
+ modules: {
+ toolbar: {
+ container: toolbarOptions, // 宸ュ叿鏍�
+ handlers: {
+ image: function (value) {
+ if (value) {
+ document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
+ } else {
+ this.quill.format('image', false);
+ }
+ },
+ link: function (value) {
+ if (value) {
+ const href = prompt('璇疯緭鍏ラ摼鎺ュ湴鍧�锛�');
+ this.quill.format('link', href)
+ } else {
+ this.quill.format('link', false)
+ }
+ },
+ }
+ }
+ }
+ },
+ }
+ },
+ methods: {
+ //涓婁紶鍥剧墖涔嬪墠async
+ beforeEditorUpload(file) {
+ const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
+ if (!isJPG) {
+ this.$message.error('涓婁紶鍥剧墖鍙兘鏄� JPG锛孭NG, GIF 鏍煎紡!')
+ } else {
+ //鏄剧ず涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = true;
+ }
+ },
+ // 涓婁紶鍥剧墖鎴愬姛
+ uploadEditorSuccess(res, file) {
+ console.log("涓婁紶鎴愬姛")
+ // this.$emit('upload',res, file)
+ console.log(res, file);
+ //鎷兼帴鍑轰笂浼犵殑鍥剧墖鍦ㄦ湇鍔″櫒鐨勫畬鏁村湴鍧�
+ let imgUrl = res.data.url;
+ let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
+ console.log(type);
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.$refs.customQuillEditor.quill;
+ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
+ let length = quill.getSelection().index;
+ // 鎻掑叆鍥剧墖||瑙嗛 res.info涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
+ if (type == 'mp4' || type == 'MP4') {
+ quill.insertEmbed(length, 'video', imgUrl)
+ } else {
+ quill.insertEmbed(length, 'image', imgUrl)
+ }
+ // 璋冩暣鍏夋爣鍒版渶鍚�
+ quill.setSelection(length + 1)
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ // 涓婁紶(鏂囦欢)鍥剧墖澶辫触
+ uploadEditorError(res, file) {
+ console.log(res);
+ console.log(file);
+ //椤甸潰鎻愮ず
+ this.$message.error('涓婁紶鍥剧墖澶辫触')
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ //涓婁紶缁勪欢杩斿洖鐨勭粨鏋�
+ uploadResult: function (res) {
+ this.uploadUrlPath = res;
+ },
+ openContent: function () {
+ console.log(this.content)
+ },
+
+ },
+ created() {
+
+ },
+ //鍙墽琛屼竴娆★紝鍔犺浇鎵ц
+ mounted() {
+ console.log("寮�濮嬪姞杞�")
+ // 鍒濆缁欑紪杈戝櫒璁剧疆title
+ },
+ watch: {
+ content(newVal, oldVal) {
+ //this.$emit('input', newVal);
+ console.log(newVal)
+ console.log(oldVal)
+ }
+ },
+
+
}
</script>
-<style scoped>
+<style>
+.editor {
+ line-height: normal !important;
+ height: 400px;
+ margin-bottom: 50px;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+ content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:";
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+ border-right: 0px;
+ content: "淇濆瓨";
+ padding-right: 0px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+ content: "14px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+ content: "10px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+ content: "18px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+ content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+ content: "鏂囨湰";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+ content: "鏍囬1";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+ content: "鏍囬2";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+ content: "鏍囬3";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+ content: "鏍囬4";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+ content: "鏍囬5";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+ content: "鏍囬6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+ content: "鏍囧噯瀛椾綋";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+ content: "琛嚎瀛椾綋";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+ content: "绛夊瀛椾綋";
+}
</style>
--
Gitblit v1.9.3