问题描述
在使用vue-admin-admin的Tinymce编辑器时,默认上传图片路径是https://httpbin.org/post。
此地址会返回类似如下的json数据,其中包含有图片的base64编码形式。
{
......
"files": {
"file": "data:image/jpeg;base64,/9j/4AAQSkZJR......"
},
......
}
当上传的图片很大,会导致返回的base64编码字符串超长,此时会明显感觉到编辑器响应缓慢。
同时,由于返回的图片编码字符串超长,在进行保存内容操作时,有可能会超出表字段设置的长度,导致数据库报错。此时只能重新定义表中相应字段的数据类型了。
代码分析
内容编辑页面
首先,查看使用Tinymce组件的编辑页面
<template>
......
<Tinymce ref="editor" v-model="courseInfo.content" :height="400" />
......
</template>
<script>
import Tinymce from '@/components/Tinymce'
......
</script>
Tinymce组件
根据页面源码,可以找到Tinymce组件:src/components/Tinymce/index.vue
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<!-- editorImage组件-->
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
</div>
</div>
</template>
<script>
import editorImage from './components/EditorImage'
......
</script>
在组件的定义中,看到Tinymce组件又引入了一个自定义的组件:editorImage
自定义EditorImage组件
打开editorImage组件:src/components/Tinymce/components/EditorImage.vue,可找到图片上传URL:https://httpbin.org/post
<el-upload
......
action="https://httpbin.org/post"
>
<el-button size="small" type="primary">
Click upload
</el-button>
</el-upload>
修改流程
后台设置
在SpringBoot的Controller添加上传方法
@RestController
public class FileUploadController {
......
@ApiOperation("上传图片")
@PostMapping("/upload")
public ResultBean upload(@RequestParam("file") MultipartFile multipartFile) {
FileInfo fileInfo = fileInfoService.upload(multipartFile);
return ResultBean.succ().data("file", fileInfo);
}
}
返回的数据格式定义
{
"succ": true,
"code": 20000,
"data": {
"file": {
"filePath": "2020/1030/1796c99498b96c40d8e1ef52465db642.png",
......
}
},
"message": "成功"
}
组件&页面修改
修改EditorImage组件
src/components/Tinymce/components/EditorImage.vue
<template>
......
<el-upload
......
# 更改图片上传路径
:action="imgUploadUrl"
>
<!--这里顺便汉化一下:)-->
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
......
</template>
<script>
......
export default {
......
props: {
......
//添加属性:上传URL
imgUploadUrl: {
type: String,
default: ''
},
//添加属性:图片服务器URL
imgBaseUrl: {
type: String,
default: ''
}
},
methods:{
//修改上传成功回调方法
handleSuccess(response, file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
// 重点是这里,response.data.file.filePath要与后台Controller返回的json数据结构对应
this.listObj[objKeyArr[i]].url = this.imgBaseUrl + '/' + response.data.file.filePath
this.listObj[objKeyArr[i]].hasSuccess = true
return
}
}
},
......
}
}
修改Tinymce组件
src/components/Tinymce/index.vue
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<editorImage
color="#1890ff"
class="editor-upload-btn"
//将取得的图片上传URL继续传递到editorImage组件
:img-upload-url="imgUploadUrl"
//将取得的图片服务器URL继续传递到editorImage组件
:img-base-url="imgBaseUrl"
@successCBK="imageSuccessCBK"
/>
</div>
</div>
</template>
<script>
......
export default {
name: 'Tinymce',
components: { editorImage },
props: {
.......
//添加属性:上传URL
imgUploadUrl: {
type: String,
default: ''
},
//添加属性:图片服务器URL
imgBaseUrl: {
type: String,
default: ''
}
}
}
</script
修改内容编辑页面
<template>
......
<tinymce
v-model="courseInfo.content"
:height="300"
//传入图片上传URL到tinymce组件
:img-upload-url="imgUrl + '/upload'"
//传入图片服务器URL到tinymce组件
:img-base-url="imgUrl"
/>
......
</template>
<script>
export default {
components: { Tinymce },
data() {
return {
......
//自定义的图片服务器URL
imgUrl: process.env.VUE_APP_IMG_URL,
......
}
},
......
}
</script>
修改完成!
再次上传图片时,会上传到自己的图片服务器,并返回全路径。
在保存内容时,保存的就是图片的URL,不再是图片的Base64编码了。