oss全部替换完成

src/components/quill/index.vue

@@ -15,14 +15,16 @@
       <div ref="editor"
            :style="styles"
            v-loading="loading"></div>
-      <el-upload :headers="headers"
-                 :action="this.api.fileupload"
-                 :before-upload="beforeUpload"
-                 :on-success="editorUploadSuccess"
+      <Upload :max-size="1000"
+              :limit="100"
+              @beforeUpload="beforeUpload"
+              @onSuccess="editorUploadSuccess"
               style="display: none">
-        <el-button class="editorUpload"
+        <div slot="trigger">
+          <el-button :id="'editorUpload' + index"
                      type="primary">点击上传</el-button>
-      </el-upload>
+        </div>
+      </Upload>
     </div>
     <mavon-editor class="md"
                   v-model="mdVal"
@@ -44,10 +46,13 @@ import toolbarOptions from './options'
 import axios from 'axios'
 import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
+import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
 
 export default {
   name: 'quill',
   components: {
+    Upload,
     mavonEditor
   },
   props: {
@@ -80,6 +85,11 @@ export default {
     elseRead: {
       type: String, default: 'false'
     },
+    // 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
+    index: {
+      type: Number,
+      default: 0
+    },
     // 是否需要编辑器切换
     radio: {
       type: Boolean,
@@ -92,6 +102,7 @@ export default {
     },
   },
   data () {
+    const that = this
     return {
       headers: {
         token: sessionStorage.getItem('token')
@@ -111,7 +122,7 @@ export default {
               'image': function (value) {
                 if (value) {
                   // 调用iview图片上传
-                  document.querySelector('.editorUpload').click()
+                  document.querySelector("#editorUpload" + that.index).click();
                 } else {
                   this.Quill.format('image', false);
                 }
@@ -232,20 +243,16 @@ export default {
             if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
               return
             }
-            const param = new FormData()
-            param.append('file', file)
-            // 把图片上传到服务器，不然会直接把base64存到数据库
-            this.$post(this.api.fileupload, param, {
-              headers: { "Content-Type": "multipart/form-data" }
-            }).then(res => {
+            // 把图片上传到oss，不然会直接把base64存到数据库
+            Oss.upload(file).then(res => {
               var range = ins.getSelection()
               if (range) {
                 //  在当前光标位置插入图片
-                ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
+                ins.insertEmbed(range.index, 'image', res.url)
                 //  将光标移动到图片后面
                 ins.setSelection(range.index + 1)
               }
-            }).catch(res => { })
+            })
           });
         }
       }, false)
@@ -254,11 +261,11 @@ export default {
       this.loading = true
     },
     // quill图片上传
-    editorUploadSuccess (res) {
+    editorUploadSuccess (file) {
       // 获取富文本组件实例
       let quill = this.Quill
       // 如果上传成功
-      if (res.data.filesResult.fileUrl) {
+      if (file.url) {
         // 获取光标所在位置
         let lengths;
         if (quill.getSelection() == null) {
@@ -267,7 +274,7 @@ export default {
           lengths = quill.getSelection().index;
         }
         // 插入图片，res为服务器返回的图片链接地址
-        quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl)
+        quill.insertEmbed(lengths, 'image', file.url)
         // 调整光标到最后
         quill.setSelection(lengths + 1)
       } else {
@@ -283,19 +290,9 @@ export default {
     // markdown图片上传
     imgAdd (pos, $file) {
       let $vm = this.$refs.md
-      // 第一步.将图片上传到服务器.
-      const formData = new FormData();
-      formData.append('file', $file);
-      axios({
-        url: this.api.fileupload,
-        method: 'post',
-        data: formData,
-        headers: {
-          token: this.token,
-          'Content-Type': 'multipart/form-data'
-        },
-      }).then((res) => {
-        $vm.$img2Url(pos, res.data.data.filesResult.fileUrl);
+      // 将图片上传到oss
+      Oss.upload($file).then(res => {
+        $vm.$img2Url(pos, res.url);
       })
     },
 

src/utils/api.js

@@ -13,6 +13,9 @@ export default {
     deleteProfile : `users/users/userInfo/deleteProfile`,
     refreshPageNotification : `nakadai/message/refreshPageNotification`,
 
+    // 阿里云文件/视频管理
+    getPlayAuth: `${uploadURL}oss/manage/getPlayAuth`, // 获取播放凭证
+    
     staffTemplate: `http://www.huorantech.cn/template/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E5%91%98%E5%B7%A5%E6%A8%A1%E6%9D%BF.xlsx`, // 后台账号模板
 
     checkEmailOrPhone: `occupationlab/occupationlab/architecture/checkEmailOrPhone`, // 新增学生前:校验手机号或者邮箱
@@ -208,14 +211,6 @@ export default {
     queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`,
     articleSort: `occupationlab/occupationlab/information/article/articleSort`,
 
-    // 阿里云文件/视频管理
-    fileDeletion: `${uploadURL}oss/manage/fileDeletion`, // 删除OSS文件
-    fileupload: `${uploadURL}oss/manage/fileupload`, // 文件上传
-    getPlayAuth: `${uploadURL}oss/manage/getPlayAuth`, // 获取播放凭证
-    removeMoreVideo: `${uploadURL}oss/manage/removeMoreVideo`, // 批量删除视频文件
-    removeVideo: `${uploadURL}oss/manage/removeVideo`, // 删除视频文件
-    fileUploadNakadai: `${host}nakadai/nakadai/oss/fileUpload`,
-
     queryProvince: `nakadai/nakadai/province/queryProvince`, //查询省份
     queryCity: `nakadai/nakadai/city/queryCity`, //查询城市
 

src/utils/editor.js

@@ -1,8 +1,6 @@
-import Axios from 'axios'
-import Api from '@/utils/api'
-import Setting from '@/setting'
-import Util from '@/libs/util'
+import Oss from '@/components/upload/upload.js'
 import { Loading } from 'element-ui'
+
 export default {
   //skin:'oxide-dark',
   language:'zh_CN',
@@ -302,57 +300,25 @@ export default {
   powerpaste_allow_local_images: true,
   powerpaste_word_import: 'clean',
   powerpaste_html_import: 'clean',
-	extraPlugins: 'uploadimage',
-	imageUploadUrl: Api.fileUploadNakadai,
-	init_instance_callback: function (editor) {
-		editor.on('paste', (evt) => {
-			// 监听粘贴事件
-			// 实现图片粘贴上传
-			const items = (evt.clipboardData || window.clipboardData).items
-			if (items[0].type.indexOf('image') !== -1) {
-				const file = items[0].getAsFile()
-				const form = new FormData()
-    		form.append('file', file)
-				// 自定义上传图片的方法
-				Axios({
-					method: 'post',
-					url: Api.fileUploadNakadai,
-					data: form,
-					headers: {
-						'Content-Type': 'multipart/form-data',
-						token: Util.local.get(Setting.tokenKey)
-					},
-				}).then(({ data }) => {
-					// 使用指令，在当前鼠标标光的位置插入元素
-					// img元素的src就是远程图片的链接地址
-					editor.execCommand(
-						"mceReplaceContent",
-						true,
-						`<img style="max-width:500px;" src="${data.filesResult.fileUrl}" >`
-					);
-				}).catch(res => {})
-				// 阻止默认事件，防止粘贴的图片进入富文本编辑器中
-				evt.preventDefault();
-			} else {
-				console.log('粘贴的不是图片，不能上传')
+	urlconverter_callback: (url, node, onSave, name) => {
+		if (node === 'img' && url.startsWith('blob:')) {
+				// Do some custom URL conversion
+				tinymce.activeEditor && tinymce.activeEditor.uploadImages()
 			}
-		})
+			// Return new URL
+			return url
 		},
   // 自定义上传
   images_upload_handler: function (blobInfo, succFun, failFun) {
-    const form = new FormData()
-    form.append('file', blobInfo.blob())
-    Axios({
-      method: 'post',
-      url: Api.fileUploadNakadai,
-      data: form,
-      headers: {
-        'Content-Type': 'multipart/form-data',
-        token: Util.local.get(Setting.tokenKey)
-      },
-    }).then(({ data }) => {
-      succFun(data.filesResult.fileUrl)
-    }).catch(res => {})
+		const blob = blobInfo.blob()
+		// blob转换为file
+		const file = new File([blob], blobInfo.filename(), {
+			type: 'application/json',
+			lastModified: Date.now()
+	});
+		Oss.upload(file).then(res => {
+			succFun(res.url)
+		})
   },
   //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
   file_picker_callback: function (callback, value, meta) {
@@ -373,18 +339,10 @@ export default {
         let fd = new FormData();
         fd.append("file", file);
         const load = Loading.service()
-        Axios({
-          method: 'post',
-          url: Api.fileUploadNakadai,
-          data: fd,
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            token: Util.local.get(Setting.tokenKey)
-          },
-        }).then(({ data }) => {
+				Oss.upload(file).then(res => {
 					load.close()
-          callback(data.filesResult.fileUrl)
-        }).catch(res => {
+					callback(res.url)
+				}).catch(e => {
 					load.close()
 				})
       }

src/views/information/addArticle/index.vue

@@ -179,12 +179,7 @@ export default {
       })
     },
     uploadSuccess (res, file, fileList) {
-      if (this.form.coverUrl) {
-        let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
-        this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
-        }).catch(res => {
-        });
-      }
+      Oss.del(this.form.coverUrl)
       this.form.coverUrl = res.data.filesResult.fileUrl;
     },
     uploadError (err, file, fileList) {

src/views/serve/projectAdd.vue

@@ -95,7 +95,8 @@
                        :type.sync="projectManage.experimentDescriptionType"
                        radio
                        :minHeight="150"
-                       :height="150" />
+                       :height="150"
+                       :index="1" />
               </el-form-item>
             </el-form>
           </div>
@@ -189,7 +190,8 @@
                          elseRead="true"
                          v-model="scope.row.experimentalRequirements"
                          :minHeight="100"
-                         :height="100" />
+                         :height="100"
+                         :index="2" />
                 </template>
               </el-table-column>
               <el-table-column prop="score"
@@ -248,7 +250,8 @@
                        :type.sync="projectManage.experimentHintType"
                        radio
                        :minHeight="150"
-                       :height="400" />
+                       :height="400"
+                       :index="3" />
               </el-form-item>
             </el-form>
           </div>