书评新增内容图片上传

src/views/modules/book/bookchapter-add-or-update.vue

@@ -143,7 +143,7 @@ import global from '../../common/common.vue'     //引入共用组间
                 this.dataForm.bookId = data.bookChapter.id
                 this.dataForm.chapter = data.bookChapter.chapter
                 this.dataForm.content = data.bookChapter.content
-                if (data.bookChapter.voices != '') {
+                if (data.bookChapter.voices != '' && data.bookChapter.voices != null) {
                   this.fileListVoices.push({
                     name:data.bookChapter.chapter,
                     url: data.bookChapter.voices

src/views/modules/book/bookcomment-add-or-update.vue

@@ -31,6 +31,8 @@
         <el-input type="textarea" rows="4" v-model="dataForm.bookdesc"></el-input>        
       </el-form-item>
       <el-form-item label="书评详情" prop="productDetails">
+        <el-upload class="avatar-uploader" :action="baseUrl + '/oss/fileoss'" accept=".jpeg,.jpg,.gif,.png" :show-file-list="false" :on-success="contentUploadSuccess" >
+        </el-upload>
         <quill-editor v-model="dataForm.productDetails" ref="myQuillEditor" :options="editorOption"
           @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" 
           @ready="onEditorReady($event)" class="shangpin_editor">
@@ -55,7 +57,24 @@
 
   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
-  import 'quill/dist/quill.bubble.css'
+import 'quill/dist/quill.bubble.css'
+  
+  const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
+  ['blockquote', 'code-block'],                      //引用，代码块
+  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
+  [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
+  [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
+  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
+  [{ 'direction': 'rtl' }],                         // 文字输入方向
+  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
+  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
+  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
+  [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
+  [{ 'align': [] }], // 居中
+  ['clean'],                                       // 清除样式,
+  ['link', 'image'],  // 上传图片、上传视频
+]
 
   export default {
     data() {
@@ -103,51 +122,71 @@
         // 富文本编辑器配置
         editorOption: {
           modules: {
-            toolbar: [
+            history: {
-              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+              delay: 1000,
-              ['blockquote', 'code-block'], // 引用  代码块
+              maxStack: 50,
-              [{
+              userOnly: false
-                header: 1
+            },
-              }, {
+            toolbar: {
-                header: 2
+              container: toolbarOptions,
-              }], // 1、2 级标题
+              handlers: {
-              [{
+                image: function (value) {
-                list: 'ordered'
+                  if (value) {
-              }, {
+                    // 调用element的图片上传组件
-                list: 'bullet'
+                    document.querySelector('.avatar-uploader input').click()
-              }], // 有序、无序列表
+                  } else {
-              [{
+                    this.quill.format('image', false)
-                script: 'sub'
+                  }
-              }, {
+                }
-                script: 'super'
+              }
-              }], // 上标/下标
+            },
-              [{
-                indent: '-1'
-              }, {
-                indent: '+1'
-              }], // 缩进
-              [{
-                direction: 'rtl'
-              }], // 文本方向
-              [{
-                size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
-              }], // 字体大小
-              [{
-                header: [1, 2, 3, 4, 5, 6]
-              }], // 标题
-              [{
-                color: []
-              }, {
-                background: []
-              }], // 字体颜色、字体背景颜色
-              // [{ font: ['songti'] }], // 字体种类
-              [{
-                align: []
-              }], // 对齐方式
-              ['clean'], // 清除文本格式
-              ['image', 'video'] // 链接、图片、视频
-            ]
           },
+          // modules: {
+          //   toolbar: [
+          //     ['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'
+          //     }], // 缩进
+          //     [{
+          //       direction: 'rtl'
+          //     }], // 文本方向
+          //     [{
+          //       size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
+          //     }], // 字体大小
+          //     [{
+          //       header: [1, 2, 3, 4, 5, 6]
+          //     }], // 标题
+          //     [{
+          //       color: []
+          //     }, {
+          //       background: []
+          //     }], // 字体颜色、字体背景颜色
+          //     // [{ font: ['songti'] }], // 字体种类
+          //     [{
+          //       align: []
+          //     }], // 对齐方式
+          //     ['clean'], // 清除文本格式
+          //     ['image'] // 链接、图片、视频
+          //   ]
+          // },
           placeholder: '请输入正文'
         },
       }
@@ -156,7 +195,8 @@
       
     },
   methods: {    
-    init(id,bookid) {
+    init(id, bookid) {
+      id ? '' : id=0
       this.productPid = bookid
         this.dataForm.shupingid = id || null
        // console.log(id,this.productPid,'this.productPid')
@@ -173,7 +213,7 @@
               data
             }) => {
              // console.log(data,666)
-              if (data && data.code === 0) {
+              if (data && data.code === 0 && data.BookForumArticlesEntity != null) {
                 this.dataForm.title = data.BookForumArticlesEntity.title
                 this.dataForm.bookdesc = data.BookForumArticlesEntity.bookdesc
                 this.dataForm.productImages = data.BookForumArticlesEntity.image 
@@ -269,7 +309,24 @@
         } else {
           return arr.toString()
         }
-      },
+    },
+    contentUploadSuccess(res, file) { 
+     // console.log(res)
+      let quill = this.$refs.myQuillEditor.quill
+      // 如果上传成功
+      if (res) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, 'image', res.url)
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error('图片插入失败！')
+      }
+
+    },
       handlePicSuccess(res, file) {
         // console.log(res,'res')
         if (res.msg == "success") {