一菇用、本地圖片上傳：
1.轉(zhuǎn)成base64纱意，轉(zhuǎn)換后的字符粘貼到notpadd++中看了下悬包，有近20萬個字符荠锭，所以直接沒考慮
2.選擇圖片后調(diào)用后臺方法傳到服務(wù)器弟跑，保存后返回一個網(wǎng)絡(luò)地址醋虏，傳入success的回調(diào)方法藏澳，通過網(wǎng)絡(luò)地址的方式顯示计寇。
前端配置代碼如下：
images_upload_handler: (blobInfo, success, failure) => {
if (blobInfo.blob().size > 1048576) {
failure('文件體積過大')
}
// 發(fā)送到后臺娇豫，傳送到阿里云oss匙姜，返回上傳后的網(wǎng)絡(luò)地址
const uploadImgUrl =this.GLOBAL.WebSite + "/article/imgUpload";
var xhr, formData;
//原先用axios發(fā)文件一直不成功，參照官方文檔冯痢。氮昧。第一次用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框杜，對應(yīng)的值的key是"value"，所以這里為result.value
success(result.value);
}
xhr.send(formData);
}
阿里云買了個打折OSS服務(wù)器袖肥，上傳OSS服務(wù)器的后臺代碼如下：
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)梧乘，組件將圖片渲染為<img src="http://leslie1015.oss-cn-hangzhou.aliyuncs.com/1234.jpg"/>
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，切換到移動模式顯示填渠，發(fā)現(xiàn)是mobile/theme.js中的<!DOCTYPE html>報錯弦聂，原來是針對移動端有專門的js文件渲染，在/node_modules/tinymce/themes下存在兩個目錄氛什，分別是silver和mobile莺葫，在封裝組件的時候只引用了這個：
import 'tinymce/themes/silver'
加上如下引用：
import 'tinymce/themes/mobile'
手機端即可成功渲染
