vue+springboot图片上传和显示的示例代码

2023-08-01 13:55:03 78

一、前言

在使用springboot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。

二、环境

前端：vue
前端组件：tinymce
后台：springboot:2.2.3

三、正文

在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。
是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。
这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。

第一步：集成tinymce组件


importTinymcefrom'@/components/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,//insertingnonbreakingspace needNonbreakingSpacePlugin
//上传图片回调
images_upload_handler:(blobInfo,success,failure)=>{
varxhr,formData;

xhr=newXMLHttpRequest();
xhr.withCredentials=false;
xhr.open('POST','/api/file/imageUpload');

xhr.onload=function(){
varjson;

if(xhr.status!==200){
failure('HTTPError:'+xhr.status);
return;
}

json=JSON.parse(xhr.responseText);
//console.log(json);
json.location=util.baseURL+json.data.filename;//在该位置，如果您的后端人员返回的字段已经包含json.location信息，则该处可以省略
if(!json||typeofjson.location!=='string'){
failure('InvalidJSON:'+xhr.responseText);
return;
}

success(json.location);
};

formData=newFormData();
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('NodeChangeChangeKeyUpSetContent',()=>{
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);
//returnimg
//},
//images_upload_handler(blobInfo,success,failure,progress){
//progress(0);
//consttoken=_this.$store.getters.token;
//getToken(token).then(response=>{
//consturl=response.data.qiniu_url;
//constformData=newFormData();
//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(){
consttinymce=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(``)
})
}
}

第二步：后台代码

@RequestMapping(value="/imageUpload",method=RequestMethod.POST)
publicvoidimageUpload(@RequestParam("file")MultipartFilefile,HttpServletRequestrequest,HttpServletResponseresponse){
try{
logger.info("上传图片名:"+file.getOriginalFilename());

if(!file.isEmpty()){
//Propertiesp=newProperties();//属性集合对象
//Stringpath=RedisUtil.class.getClassLoader().getResource("").getPath()+"global.properties";
//FileInputStreamfis=newFileInputStream(path);//属性文件输入流
//p.load(fis);//将属性文件流装载到Properties对象中
//fis.close();//关闭流
//StringuploadPath=p.getProperty("imgUpload.url");
////路径名称上加上-年/月日：yyyy/MMdd
//uploadPath+="Uploads/"+newSimpleDateFormat("yyyy").format(newDate())+"/"+newSimpleDateFormat("MMdd").format(newDate())+"/";

Stringpath=request.getServletContext().getRealPath("/");

path="/Users/qinshengfei/fsdownload";
logger.error("path:"+path);
//路径名称上加上-年/月日：yyyy/MMdd
StringuploadPath=File.separatorChar+"Uploads"+File.separatorChar+newSimpleDateFormat("yyyy").format(newDate())+
File.separatorChar+newSimpleDateFormat("MMdd").format(newDate())+File.separatorChar;

//文件上传大小
longfileSize=10*1024*1024;
//判断文件大小是否超过
if(file.getSize()>fileSize){
backInfo(response,false,2,"");
return;
}
//获取上传文件名称
StringOriginalFilename=file.getOriginalFilename();
//获取文件后缀名：如jpg
StringfileSuffix=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;
//}

//检查上传文件的目录
FileuploadDir=newFile(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为随机字符串
Stringnewname=getRandomString(13)+"."+fileSuffix;

FilesaveFile=newFile(path+uploadPath,newname);

try{
file.transferTo(saveFile);

backInfo(response,true,0,uploadPath+newname);
}catch(Exceptione){
logger.error(e.getMessage(),e);
backInfo(response,false,1,"");
return;
}
}else{
backInfo(response,false,-1,"");
return;
}
}catch(Exceptione){
logger.error(e.getMessage());
}

}

//返回信息
privatevoidbackInfo(HttpServletResponseresponse,booleanflag,intmessage,StringfileName){
fileName=fileName.replace("\\","/");
Stringjson="";
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(IOExceptione){
logger.error(e.getMessage(),e);
}
}

第三步：后台处理显示图片

/**
*显示单张图片
*@return
*/
@RequestMapping("/show")
publicResponseEntityshowPhotos(StringfileName){

try{
Stringpath="/Users/qinshengfei/fsdownload";
//由于是读取本机的文件，file是一定要加上的，path是在application配置文件中的路径
logger.error("showPhotos:"+path+fileName);
returnResponseEntity.ok(resourceLoader.getResource("file:"+path+fileName));
}catch(Exceptione){
returnResponseEntity.notFound().build();
}
}

第四步：显示效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue+springboot图片上传和显示的示例代码

热门推荐

随机推荐