溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、前言
在使用spring boot做后臺系統，vue做前端系統，給客戶開發一套系統時候，其中用到了圖片上傳和顯示的功能。
二、環境
三、正文
在客戶開發一套門戶管理系統時，集成了tinymce組件，用于編輯內容，springboot不同于其他項目。
是集成tomcat的，文件和圖片是不能直接訪問的。所以我在做集成富文本編輯器時，需要處理圖片的問題。
這個問題跟上傳頭像等顯示圖片的功能是類似的。下面記錄詳情步驟代碼。
第一步：集成tinymce組件
<!--引入tinymce組件--> import Tinymce from '@/components/Tinymce'
<!--啟用tinymce組件--> <el-form-item> <el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button> </el-form-item>
<!--核心代碼-->
<template>
<div class="page-container">
<div class="page-title-section">
</div>
<div class="page-content-section">
<div class="page-content-form">
<el-form ref="dataForm" :model="formData" :rules="formRules" label-width="180px">
<el-form-item>
<div>
<tinymce v-model="formData.content" :height="300" />
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="btnLoading" @click="onSubmit" >保 存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
export default {
name:"contentEdit",
components: {Tinymce},
data(){
return{
formData:{
content:'',
},
}
},
created() {
},
mounted() {},
activated() {},
deactivated() {},
methods:{
//表單提交
onSubmit(){
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.btnLoading = true
this.$axios({
url: this.formData.id == '' ? '/products/save' : '/products/edit',
method: 'POST',
params: this.formData
}).then(res => {
//處理成功回調
const{ state,result , errmsg} = res.data
if( state && state == 1 ){
this.$message.success('操作成功');
this.$router.push( {path:'/products/list'} )
}else{
return this.$message.error(errmsg || '操作失敗');
}
}).finally(() => {
this.btnLoading = false
})
}
})
},
</script>
<!--Tinymce初始化代碼-->
initTinymce() {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
language: this.languageTypeList['en'],
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
//上傳圖片回調
images_upload_handler:(blobInfo, success, failure) => {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/api/file/imageUpload');
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
// console.log(json);
json.location = util.baseURL + json.data.filename; //在該位置，如果您的后端人員返回的字段已經包含json.location信息，則該處可以省略
if (!json || typeof json.location !== 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
},
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
}
// 整合七牛上傳
// images_dataimg_filter(img) {
// setTimeout(() => {
// const $image = $(img);
// $image.removeAttr('width');
// $image.removeAttr('height');
// if ($image[0].height && $image[0].width) {
// $image.attr('data-wscntype', 'image');
// $image.attr('data-wscnh', $image[0].height);
// $image.attr('data-wscnw', $image[0].width);
// $image.addClass('wscnph');
// }
// }, 0);
// return img
// },
// images_upload_handler(blobInfo, success, failure, progress) {
// progress(0);
// const token = _this.$store.getters.token;
// getToken(token).then(response => {
// const url = response.data.qiniu_url;
// const formData = new FormData();
// formData.append('token', response.data.qiniu_token);
// formData.append('key', response.data.qiniu_key);
// formData.append('file', blobInfo.blob(), url);
// upload(formData).then(() => {
// success(url);
// progress(100);
// })
// }).catch(err => {
// failure('出現未知問題，刷新頁面，或者聯系程序員')
// console.log(err);
// });
// },
})
},
destroyTinymce() {
const tinymce = window.tinymce.get(this.tinymceId)
if (this.fullscreen) {
tinymce.execCommand('mceFullScreen')
}
if (tinymce) {
tinymce.destroy()
}
},
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
window.tinymce.get(this.tinymceId).getContent()
},
imageSuccessCBK(arr) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
}
}
第二步：后臺代碼
@RequestMapping(value = "/imageUpload", method = RequestMethod.POST)
public void imageUpload(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
try {
logger.info("上傳圖片名 :" + file.getOriginalFilename());
if (!file.isEmpty()) {
// Properties p = new Properties();// 屬性集合對象
// String path = RedisUtil.class.getClassLoader().getResource("").getPath()+"global.properties";
// FileInputStream fis = new FileInputStream(path);// 屬性文件輸入流
// p.load(fis);// 將屬性文件流裝載到Properties對象中
// fis.close();// 關閉流
// String uploadPath = p.getProperty("imgUpload.url");
// //路徑名稱上加上-年/月日：yyyy/MMdd
// uploadPath += "Uploads/"+new SimpleDateFormat("yyyy").format(new Date())+ "/" +new SimpleDateFormat("MMdd").format(new Date())+"/";
String path= request.getServletContext().getRealPath("/");
path="/Users/qinshengfei/fsdownload";
logger.error("path:"+path);
//路徑名稱上加上-年/月日：yyyy/MMdd
String uploadPath = File.separatorChar+"Uploads"+File.separatorChar+new SimpleDateFormat("yyyy").format(new Date())+
File.separatorChar +new SimpleDateFormat("MMdd").format(new Date())+File.separatorChar;
// 文件上傳大小
long fileSize = 10 * 1024 * 1024;
//判斷文件大小是否超過
if (file.getSize() > fileSize) {
backInfo(response, false, 2, "");
return;
}
//獲取上傳文件名稱
String OriginalFilename = file.getOriginalFilename();
//獲取文件后綴名：如jpg
String fileSuffix = OriginalFilename.substring(OriginalFilename.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.asList(TypeMap.get("image").split(",")).contains(fileSuffix)) {
backInfo(response, false, 3, "");
return;
}
//判斷是否有文件上傳
// if (!ServletFileUpload.isMultipartContent(request)) {
// backInfo(response, false, -1, "");
// return;
// }
// 檢查上傳文件的目錄
File uploadDir = new File(path+uploadPath);
System.out.println(path+uploadPath);
if (!uploadDir.isDirectory()) {
if (!uploadDir.mkdirs()) {
backInfo(response, false, 4, "");
return;
}
}
// 是否有上傳的權限
if (!uploadDir.canWrite()) {
backInfo(response, false, 5, "");
return;
}
// 新文件名-加13為隨機字符串
String newname = getRandomString(13) +"." + fileSuffix;
File saveFile = new File(path+uploadPath, newname);
try {
file.transferTo(saveFile);
backInfo(response, true, 0, uploadPath+newname);
} catch (Exception e) {
logger.error(e.getMessage(), e);
backInfo(response, false, 1, "");
return;
}
} else {
backInfo(response, false, -1, "");
return;
}
} catch (Exception e) {
logger.error(e.getMessage());
}
}
// 返回信息
private void backInfo(HttpServletResponse response, boolean flag, int message, String fileName) {
fileName=fileName.replace("\\","/");
String json = "";
if (flag) {
json = "{ \"status\": \"success";
} else {
json = "{ \"status\": \"error";
}
json += "\",\"fileName\": \"http://127.0.0.1:8090/file/show?fileName=" + fileName + "\",\"message\": \"" + message + "\"}";
try {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
logger.error(e.getMessage(), e);
}
}
第三步：后臺處理顯示圖片
/**
* 顯示單張圖片
* @return
*/
@RequestMapping("/show")
public ResponseEntity showPhotos(String fileName){
try {
String path = "/Users/qinshengfei/fsdownload";
// 由于是讀取本機的文件，file是一定要加上的， path是在application配置文件中的路徑
logger.error("showPhotos:"+path+fileName);
return ResponseEntity.ok(resourceLoader.getResource("file:" + path + fileName));
} catch (Exception e) {
return ResponseEntity.notFound().build();
}
}
第四步：顯示效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
