From 89504036742a64ac44c821b9a069220faf150915 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期一, 15 四月 2024 10:32:52 +0800
Subject: [PATCH] 文件上传整合代码
---
Source/ProjectWeb/src/views/custom-ui/test.vue | 132 ++------------------------------------------
1 files changed, 6 insertions(+), 126 deletions(-)
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index 46ca215..aae9e1e 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/Source/ProjectWeb/src/views/custom-ui/test.vue
@@ -1,149 +1,29 @@
<template>
<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>
+ <el-button @click="textVisible = true">瀵屾枃鏈紪杈�</el-button>
<UploadFiles :visible.sync="visible"></UploadFiles>
+ <rich-text :visible.sync="textVisible"></rich-text>
</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 {
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)
- }
- },
- }
- }
- }
- },
+ textVisible: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)
- },
-
- },
+ methods: {},
created() {
},
- //鍙墽琛屼竴娆★紝鍔犺浇鎵ц
+
mounted() {
- console.log("寮�濮嬪姞杞�")
- // 鍒濆缁欑紪杈戝櫒璁剧疆title
},
- watch: {
- content(newVal, oldVal) {
- //this.$emit('input', newVal);
- console.log(newVal)
- console.log(oldVal)
- }
- },
+ watch: {},
}
--
Gitblit v1.9.3