修改vue-element-admin中Tinymce编辑器的图片上传路径

问题描述

在使用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编码了。