广州陈村网站建设,云南网站设计方案,网站无法做301重定向,wordpress 页面平铺一、本地图片上传#xff1a;1.转成base64#xff0c;转换后的字符粘贴到notpadd中看了下#xff0c;有近20万个字符#xff0c;所以直接没考虑2.选择图片后调用后台方法传到服务器#xff0c;保存后返回一个网络地址#xff0c;传入success的回调方法#xff0c;通过网…一、本地图片上传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.valuesuccess(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配置/Componentpublic 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手机端即可成功渲染
