1.文件上传相关
1.创建文件上传页面(upload.html),从elememt组建中找到上传组件中的照片墙模版代码复制到eui模版中.其中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<input type="text" placeholder="说点啥" v-model="weibo.content">
<!--action设置上传地址
name设置上传参数的名称
limit设置上传图片的数量
:on-success="handleSuccess"文件上传成功调用的方法-->
<el-upload
action="/upload"
name="pic"
limit="3"
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>
<input type="button" value="发布微博" @click="insert()">
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
let v= new Vue({
el: '#app',
data: function() {
return {
weibo:{
content:'',
url:'',
},
dialogImageUrl: '',
dialogVisible: false
}
},
methods:{
handleRemove(file, fileList) {
console.log(file, fileList);
/*当删除页面中图片时触发的方法
* 发请求删除服务器中的图片
* file代表当前删除的图片文件
* file.response代表上传该文件成功时服务器响应的内容(当前删除图片的路径)*/
axios.get("/remove?url="+file.response).then(function() {
console.log("删除服务器图片完成");
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleSuccess(response,file,fileList) {
/*response代表服务器上传成功时响应的数据,此处的response和Axios框架发出请求得到的response不同,类似与response.data
* file代表当前上传成功的文件
* fileList代表上传的所有文件(是一个数组)*/
v.weibo.url=response;
},
insert(){
/*提交图片路径和描述,到数据库*/
if(v.weibo.url==""){
alert("请选择上传的图片");
return;
}
axios.post("/insert",v.weibo).then(function (response) {
alert("发布完成");
location.href="/";//回到首页
})
}
}
})
</script>
</html>
<!--action设置上传地址 name设置上传参数的名称 limit设置上传图片的数量-->
在el-upload中事件绑定:on-success="handleSuccess"事件,获取
on-success | 文件上传成功时的钩子 | function(response, file, fileList) |
2.在cn.tedu.boot07.controller.UploadController中,获取图片路径并存到指定文件夹中: