[代码优化](v2.5): 由于免费图床过于不稳定，影响体验，因此删除图床管理模块。 富文本，markdown 替换为使用本地存储上传图片

src/api/tools/picture.js

-import request from '@/utils/request'
-
-export function del(ids) {
-  return request({
-    url: 'api/pictures',
-    method: 'delete',
-    data: ids
-  })
-}
-
-export function sync() {
-  return request({
-    url: 'api/pictures/synchronize',
-    method: 'post'
-  })
-}
-
-export default { del, sync }

src/store/modules/api.js

@@ -8,7 +8,7 @@ const api = {
     // 实时控制台
     // 实时控制台
     socketApi: baseUrl + '/websocket?token=kl',
     socketApi: baseUrl + '/websocket?token=kl',
     // 图片上传
     // 图片上传
-    imagesUploadApi: baseUrl + '/api/pictures',
+    imagesUploadApi: baseUrl + '/api/localStorage/pictures',
     // 修改头像
     // 修改头像
     updateAvatarApi: baseUrl + '/api/users/updateAvatar',
     updateAvatarApi: baseUrl + '/api/users/updateAvatar',
     // 上传文件到七牛云
     // 上传文件到七牛云

src/views/components/Editor.vue

@@ -3,7 +3,6 @@
     <p class="warn-content">
     <p class="warn-content">
       富文本基于
       富文本基于
       <el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
       <el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
-      ，图片上传使用 <el-link type="primary" href="https://sm.ms/" target="_blank">SM.MS</el-link>
     </p>
     </p>
     <el-row :gutter="10">
     <el-row :gutter="10">
       <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
       <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
@@ -27,14 +26,15 @@ export default {
       editorContent:
       editorContent:
         `
         `
         <ul>
         <ul>
-          <li>富文本中图片上传使用的是 SM.MS 图床：<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
           <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
           <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
-        </ul>`
+        </ul>
+        `
     }
     }
   },
   },
   computed: {
   computed: {
     ...mapGetters([
     ...mapGetters([
-      'imagesUploadApi'
+      'imagesUploadApi',
+      'baseApi'
     ])
     ])
   },
   },
   mounted() {
   mounted() {
@@ -47,8 +47,10 @@ export default {
       // files 是 input 中选中的文件列表
       // files 是 input 中选中的文件列表
       // insert 是获取图片 url 后，插入到编辑器的方法
       // insert 是获取图片 url 后，插入到编辑器的方法
       files.forEach(image => {
       files.forEach(image => {
-        upload(_this.imagesUploadApi, image).then(data => {
-          insert(data.data.url)
+        upload(_this.imagesUploadApi, image).then(res => {
+          const data = res.data
+          const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
+          insert(url)
         })
         })
       })
       })
     }
     }

src/views/components/MarkDown.vue

@@ -3,7 +3,6 @@
     <p class="warn-content">
     <p class="warn-content">
       Markdown 基于
       Markdown 基于
       <el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
       <el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
-      ，图片上传使用 <el-link type="primary" href="https://sm.ms/" target="_blank">SM.MS</el-link>
     </p>
     </p>
     <mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
     <mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
   </div>
   </div>
@@ -21,7 +20,8 @@ export default {
   },
   },
   computed: {
   computed: {
     ...mapGetters([
     ...mapGetters([
-      'imagesUploadApi'
+      'imagesUploadApi',
+      'baseApi'
     ])
     ])
   },
   },
   mounted() {
   mounted() {
@@ -32,8 +32,10 @@ export default {
   },
   },
   methods: {
   methods: {
     imgAdd(pos, $file) {
     imgAdd(pos, $file) {
-      upload(this.imagesUploadApi, $file).then(data => {
-        this.$refs.md.$img2Url(pos, data.data.url)
+      upload(this.imagesUploadApi, $file).then(res => {
+        const data = res.data
+        const url = this.baseApi + '/file/' + data.type + '/' + data.realName
+        this.$refs.md.$img2Url(pos, url)
       })
       })
     }
     }
   }
   }

src/views/tools/picture/index.vue

-<template>
-  <div class="app-container">
-    <!--工具栏-->
-    <div class="head-container">
-      <div v-if="crud.props.searchToggle">
-        <!--搜索-->
-        <el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <date-range-picker v-model="query.createTime" class="date-item" />
-        <rrOperation />
-      </div>
-      <crudOperation :permission="permission">
-        <!-- 上传 -->
-        <el-button
-          slot="left"
-          v-permission="['admin','pictures:add']"
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-upload"
-          @click="dialog = true"
-        >上传</el-button>
-        <el-tooltip slot="right" class="item" effect="dark" content="使用同步功能需要在 https://sm.ms/login 中注册账号，并且在 application.yml 文件中修改 Secret Token" placement="top-start">
-          <el-button
-            v-permission="['admin','pictures:add']"
-            class="filter-item"
-            size="mini"
-            type="success"
-            icon="el-icon-refresh"
-            :loading="syncLoading"
-            @click="sync"
-          >同步</el-button>
-        </el-tooltip>
-      </crudOperation>
-    </div>
-    <!--上传图片-->
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="600px" @close="doSubmit">
-      <el-upload
-        :on-preview="handlePictureCardPreview"
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :headers="headers"
-        :file-list="fileList"
-        :action="imagesUploadApi"
-        list-type="picture-card"
-      >
-        <i class="el-icon-plus" />
-      </el-upload>
-      <el-dialog append-to-body :visible.sync="dialogVisible">
-        <img :src="dialogImageUrl" width="100%" alt="">
-      </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-      <el-table-column type="selection" width="55" />
-      <el-table-column width="200" prop="filename" label="文件名" />
-      <el-table-column prop="username" label="上传者" />
-      <el-table-column ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
-        <template slot-scope="{row}">
-          <el-image
-            :src="row.url"
-            :preview-src-list="[row.url]"
-            fit="contain"
-            lazy
-            class="el-avatar"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column prop="size" label="文件大小" />
-      <el-table-column prop="height" label="高度" />
-      <el-table-column prop="width" label="宽度" />
-      <el-table-column prop="createTime" label="创建日期">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页组件-->
-    <pagination />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import crudPic from '@/api/tools/picture'
-import CRUD, { presenter, header, crud } from '@crud/crud'
-import { getToken } from '@/utils/auth'
-import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
-import pagination from '@crud/Pagination'
-import DateRangePicker from '@/components/DateRangePicker'
-
-export default {
-  name: 'Pictures',
-  components: { pagination, crudOperation, rrOperation, DateRangePicker },
-  cruds() {
-    return CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }})
-  },
-  mixins: [presenter(), header(), crud()],
-  data() {
-    return {
-      dialog: false,
-      syncLoading: false,
-      headers: {
-        'Authorization': getToken()
-      },
-      permission: {
-        del: ['admin', 'pictures:del']
-      },
-      dialogImageUrl: '',
-      dialogVisible: false,
-      fileList: [],
-      pictures: []
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'imagesUploadApi'
-    ])
-  },
-  created() {
-    this.crud.optShow.add = false
-    this.crud.optShow.edit = false
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      const uid = file.uid
-      const id = response.id
-      this.pictures.push({ uid, id })
-    },
-    handleBeforeRemove(file, fileList) {
-      for (let i = 0; i < this.pictures.length; i++) {
-        if (this.pictures[i].uid === file.uid) {
-          crudPic.del(Array.of(this.pictures[i].id)).then(res => {})
-          return true
-        }
-      }
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    // 刷新列表数据
-    doSubmit() {
-      this.fileList = []
-      this.dialogVisible = false
-      this.dialogImageUrl = ''
-      this.dialog = false
-      this.crud.toQuery()
-    },
-    // 监听上传失败
-    handleError(e, file, fileList) {
-      const msg = JSON.parse(e.message)
-      this.$notify({
-        title: msg.message,
-        type: 'error',
-        duration: 2500
-      })
-    },
-    sync() {
-      this.syncLoading = true
-      crudPic.sync().then(res => {
-        this.crud.notify('同步成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
-        this.crud.toQuery()
-        this.syncLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>