前端要做的事情：
①加图片上传组件，从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服务器）的位置，这个位置如何获取？
保存时需要获取图片在公司服务器上的地址，
可以通过上传后 控制台打印出提交的数据来查看图片所保存的地址路径
把这个路径复制到数据库中，前端浏览器列表就可以显示出公司服务器存储的图片
图片上传后的页面显示结果
页面结果显示
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
