上传图片01"/>
上传图片01
一、修改application.properties
#server.port=8081 修改端口
spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
#设置上传文件大小 默认1MB
spring.servlet.multipart.max-file-size=10MB
#设置静态资源文件夹
spring.web.resources.static-locations=file:d:/files,classpath:static #设置静态资源文件夹
spring.web.resources.static-locations=file:d:/files,classpath:static .
在浏览器的地址导航栏可以直接访问静态资源 如图:
二、页面引入
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href=".15.9/theme-chalk/index.css">
</head>
<body>
<div id="app"><h1>上传页面</h1><h1><a href="/index.html">返回页面</a></h1><!--请求路径 action="/upload"--><!--name 代表发请求时参数的名称--><!-- :on-success="handleSuccess" 作用是上传成功后调用方法为handleSuccess--><el-uploadname="pic"action="/upload"list-type="picture-card":on-success="handleSuccess":on-preview="handlePictureCardPreview":on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog><hr><!--http://locahost:8080/1d358f83-f473-44db-bb6a-0bcbd638746c.jpg--><!-- <img :src="url" alt="">--><!-- <!–response =file.response 代表服务器响应的图片路径–><img v-for="f in arr" :src="f.response" alt="" style="height: 50px;width: 50px">--><input type="text" placeholder="图片描述" v-model="intro"><input type="button" value="发布图片" @click="send()">
</div>
</body>
<!-- import Vue before Element -->
<script src=".6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src=".15.9/index.min.js"></script>
<!--import Axios-->
<script src=".21.1/axios.min.js"></script>
<script>let v = new Vue({el: '#app',data: function () {return {url: "",dialogImageUrl: '',dialogVisible: false,arr: [],intro: ""};},methods: {handleRemove(file, fileList) {console.log(file, fileList);//当页面中删除图片的时候需要向服务器发送删除请求,让服务器把files文件夹中的图片删除.axios.get("/remove?url=" + file.response).then(function () {console.log("删除完成")})},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},/*handleSuccess(response,file,fileList)1.response 返回服务器响应数据(文件路径)2.file 代表是当前上传成功的文件对象3.fileList 代表上传成功的所有文件对象(数组)*/handleSuccess(response, file, fileList) {console.log("图片路径" + response)/*response没有.data与axios不一样*//*response ==file.response*/v.arr.push(file.response);console.log(response);},send() {let imge = {intro: v.intro, urls: v.arr.toString()};axios.post("insert", imge).then(function () {alert("ok");})}}})
</script>
</html>使用element图片上传模板时:action="/upload"为请求路径, name 代表发请求时参数的名称.
handleSuccess(response,file,fileList),handleSusses为组件固有方法(传输成功后会执行的方法),里面存放着对象,file,数组file,response是file的路径名.
1.response 返回服务器响应数据(文件路径)
2.file 代表是当前上传成功的文件对象
3.fileList 代表上传成功的所有文件对象(数组)
三、后端获取
@RestController
public class UploadController {@RequestMapping("/upload")public String upload(MultipartFile pic) throws IOException {System.out.println("pic = " + pic);//得到文件的原始文件名 a.jpgString filename = pic.getOriginalFilename();System.out.println(filename);//得到后缀String suffix = filename.substring(filename.lastIndexOf("."));System.out.println("suffix = " + suffix);//得到唯一的文件名filename = UUID.randomUUID() + suffix;System.out.println("filename = " + filename);//保存图片路径//创建文件夹路径String dirPath = "d:/files";File file = new File(dirPath);if (!file.exists()) {file.mkdirs();}//创建完整路径 d:/files/xxxx.jpgString filePath=dirPath+'/'+filename;//把文件保存到指定路径pic.transferTo(new File(filePath));return "/"+filename;}此时的pic就是封装好的图片对象,可以直接保存,或者对对象进行操作.
MultipartFie 是SpringMVC的组件,用于文件的上传操作,不使用组件就需要使用Http Servlet Request 来接受页面传输过来的数据,再转换为File类的文件.
更多推荐
上传图片01
发布评论