一、本地图片上传：

1.转成base64，转换后的字符粘贴到notpadd++中看了下，有近20万个字符，所以直接没考虑

2.选择图片后调用后台方法传到服务器，保存后返回一个网络地址，传入success的回调方法，通过网络地址的方式显示。

前端配置代码如下：

images_upload_handler: (blobInfo, success, failure) => {

if (blobInfo.blob().size > 1048576) {

failure('文件体积过大')

}

// 发送到后台，传送到阿里云oss，返回上传后的网络地址

const uploadImgUrl =this.GLOBAL.WebSite + "/article/imgUpload";

var xhr, formData;

//原先用axios发文件一直不成功，参照官方文档。。第一次用XMLHttpRequest这鬼东西

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', uploadImgUrl);

formData = new FormData();

formData.append('file', blobInfo.blob());

xhr.onload = function() {

if (xhr.status != 200) {

failure('HTTP Error: ' + xhr.status);

return;

}

const result = JSON.parse(this.responseText);

if (!result || typeof result.value != 'string') {

failure('Invalid JSON: ' + xhr.responseText);

return;

}

// 后台返回json，对应的值的key是"value"，所以这里为result.value

success(result.value);

}

xhr.send(formData);

}

阿里云买了个打折OSS服务器，上传OSS服务器的后台代码如下：

public static void uploadFile(MultipartFile multipartFile, String fileName) {

OSSClient ossClient = new OSSClient(AliyunOssConfig.getEndpoint(),

AliyunOssConfig.getAccessKeyId(), AliyunOssConfig.getAccessKeySecret());

try {

if (!ossClient.doesBucketExist(AliyunOssConfig.getDefaultBucketName())) {

ossClient.createBucket(AliyunOssConfig.getDefaultBucketName());

}

ossClient.putObject(AliyunOssConfig.getDefaultBucketName(), fileName,

multipartFile.getInputStream());

} catch (Exception e) {

logger.error(e,"uploadFile is error.");

} finally {

ossClient.shutdown();

}

}

上传成功后需要将阿里云OSS的文件获取路径返回给前端组件处理。具体格式为：bucketName.endpoint/fileName，

如：http://leslie1015.oss-cn-hangzhou.aliyuncs.com/1234.jpg，前端获取后传入success(url)，组件将图片渲染为

package com.leslie.silk.config;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Component;

/**

*阿里云OSS配置

/

@Component

public class AliyunOssConfig {

private static String endpoint;

private static String accessKeyId;

private static String accessKeySecret;

private static String defaultBucketName;

private static String endpointContent;

private AliyunOssConfig() {

}

public static String getEndpoint() {

return endpoint;

}

@Value("${aliyun.oss.endpoint}")

private void setEndpoint(String endpoint) {

AliyunOssConfig.endpoint = endpoint;

}

public static String getAccessKeyId() {

return accessKeyId;

}

@Value("${aliyun.oss.accessKeyId}")

private void setAccessKeyId(String accessKeyId) {

AliyunOssConfig.accessKeyId = accessKeyId;

}

public static String getAccessKeySecret() {

return accessKeySecret;

}

@Value("${aliyun.oss.accessKeySecret}")

private void setAccessKeySecret(String accessKeySecret) {

AliyunOssConfig.accessKeySecret = accessKeySecret;

}

public static String getDefaultBucketName() {

return defaultBucketName;

}

@Value("${aliyun.oss.defaultBucketName}")

private void setDefaultBucketName(String defaultBucketName) {

AliyunOssConfig.defaultBucketName = defaultBucketName;

}

public static String getEndpointContent() {

return endpointContent;

}

@Value("${aliyun.oss.endpointContent}")

public void setEndpointContent(String endpointContent) {

AliyunOssConfig.endpointContent = endpointContent;

}

}

二、桌面端富文本组件正常，移动端不显示

其实很简单。。。。愣是搞了半天

F12，切换到移动模式显示，发现是mobile/theme.js中的报错，原来是针对移动端有专门的js文件渲染，在/node_modules/tinymce/themes下存在两个目录，分别是silver和mobile，在封装组件的时候只引用了这个：

import 'tinymce/themes/silver'

加上如下引用：

import 'tinymce/themes/mobile'

手机端即可成功渲染