前端要做的事情:
①加图片上传组件,从ElementUI组件中找 ②写回调函数,向后端请求上传,这是一个单独的请求
前端提交文件,用的EelmentUI提供的文件上传组件,可以把它理解为ajax封装的文件提交ElementUI 复制需要的组件代码内容即可。
别忘了加上: :with-credentials=“true” //发送cookie中的sessionid,默认false 否则后端有拦截器,拦截器就会认为你没有登录,就请求不过去 我们向后端发送请求是通过ajax请求的,而文件上传需要单独请求
前端代码:
在写添加添加新闻功能–上传图片、显示图片 add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/elementUI.css"/>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/elementUI.js" type="text/javascript" charset="utf-8"></script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
margin-left:80px ;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.avatar {
width: 80px;
height: 80px;
display: block;
}
</style>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题" border style="width: 30%">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="摘要" border style="width: 80%">
<el-input v-model="form.digest"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.newsTypeid" placeholder="请选择">
<el-option v-for="(newsType,index) in newsTypes"
:label="newsType.name"
:value="newsType.id"></el-option>
</el-select>
</el-form-item>
<!-- 封面图-->
<el-upload
class="avatar-uploader"
:with-credentials="true"
action="http://127.0.0.1:9998/newsCtl/uploadNewsImg"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- 内容-->
<el-form-item label="内容">
<el-input type="textarea" v-model="form.content" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save()" @click="save()" >保存</el-button>
</el-form-item>
</el-form>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
newsTypes:[],
form:{
title:'',
digest:'',
img:'',
newsTypeid:'',
content:''
},
imageUrl:''
},
methods: {
/* 图片上传成功后的回调函数*/
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw); //前端进行的图片的转码,临时显示
//res 后端响应回来的数据
this.form.img="http://127.0.0.1:8080/"+res.data;
/*
这个不是axios发起的请求,所以响应回来的就直接是CommonResult,
res.data res就是CommonResult,再拿到CommonResult里的data
拿到的就是在服务器上的图片地址
axios请求响应回来:先要拿到axios请求中的data,再拿到Commonresult,最后拿到CommonResult中的data
*/
},
save() {
console.log(this.form);//测试点击保存后,有没有拿到表单值
}
},
created() {
var _this = this;
axios.get(serverPath+"/newsCtl/findNewsTypes").then(function(resp){
if(resp.data.code==500){
alert("系统忙");
return;
}
if(resp.data==5){
alert("用户登录失效");
window.parent.location.replace("../adminlogin.html");
return;
}
if(resp.data.code==200){
_this.newsTypes = resp.data.data; // resp就是axios里面的data.CommonResult.data
}
})
}
})
</script>
</body>
</html>
list.html 修饰前端显示的图片大小
<el-table-column prop="img" label="封面图" align="center" width="100">
<template slot-scope="scope" >
<img :src="scope.row.img" style="width:60px;height:60px"/> <!-- 存的时候会把图片地址存入数据库,要显示图片的时候把地址拿过来往这一放 -->
</template>
</el-table-column>
后端要做的事:
img----> base64(字符串)----> 前端把文件转为二进制流进行提交,在后端要进行接收,提交就比较麻烦 使用apache的文件上传组件进行转码 springmvc再次对转码后的内容进行封装,封装成一个文件对象
①导入apache文件上传jar包
1.3.3导入不了的,换一下版本号1.3.2
<!-- commons-fileupload 文件上传jar包 apache提供的 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
②加入文件上传组件类 springboot的配置
package com.ffyc.ssmback.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
@Configuration
public class MultipartConfig {
/**
* 文件上传配置
* @return
*/
@Bean //multipartresolver 文件上传解析
public CommonsMultipartResolver multipartConfigElement() {
CommonsMultipartResolver multipartresolver = new CommonsMultipartResolver();
multipartresolver.setMaxUploadSize(1024*1024*5);
multipartresolver.setDefaultEncoding("utf-8");
return multipartresolver;
}
}
目前用的springboot框架,内嵌了服务器,所以用springboot内嵌的服务器模拟作为用户电脑端, 而把tomcat 服务器模拟作为公司存储文件的服务器(比如:京东,访问京东页面时显示的图片就在他们公司的服务器存储着)。 以后项目有文件上传,就把tomcat启动,作为公司的服务器
③在tomcat安装的目录下的webapps文件中新建文件,专门存储要上传的图片,启动tomcat作为公司服务器
④写后端Controller层 上传封面图方法,上传到公司服务器(tomcat服务器下webapps\newsimg中)
/*
上传新闻封面图
*/
@PostMapping(value = "/uploadNewsImg") //前端提交文件,默认是键值对提交,它的键默认为file
public CommonResult uploadNewsImg(@RequestParam("file") CommonsMultipartFile file){
try{
/*
三台服务器来跑一个项目:
tomcat服务器端口:8080 放img的 启动tomcat,模拟作为作为公司存放上传文件服务器,在webapps文件中新建 newsimg文件,用来存储上传到公司服务器上的图片
spirngboot内嵌服务器端口:9998 运行Java的
HBuilder X前端服务器:8848 放前端页面的
*/
String fileName = file.getOriginalFilename(); //拿到上传时的文件名,把文件名拼到下面的路径中去
String newFileName = new Date().getTime()+fileName; //为了避免用户端上传图片重名,需要拿到一个时间戳,把图片名拼到后面去,生成一个新文件名
File f = new File("D:\\Program Files\\apache-tomcat-9.0.43\\webapps\\newsimg\\"+newFileName);//指定图片在服务器端的位置
file.transferTo(f); //把图片上传到指定的图片服务器
return new CommonResult("上传成功", 200,"newsimg/"+newFileName);
//响应给前端在服务器端的位置,用户根据ip+端口访问公司服务器,http:127.0.0.1:8080/newsimg/XXX
}catch (Exception e){
e.printStackTrace();
return new CommonResult("上传失败", 500, null);
}
}
测试是否上传成功
查看公司服务器(tomcat服务器)下 webapps\newsimg文件里面,新增了刚上传的图片:
那数据库中如何存储图片?
img 表数据存储的是 图片在公司服务器(tomcat服务器)的位置,这个位置如何获取?
保存时需要获取图片在公司服务器上的地址, 可以通过上传后 控制台打印出提交的数据来查看图片所保存的地址路径 把这个路径复制到数据库中,前端浏览器列表就可以显示出公司服务器存储的图片
图片上传后的页面显示结果
页面结果显示