前端
图片上传
<template>
<div class="comment-wrapper">
<el-form :model="form" style=" padding: 20px;" label-width="80px">
<el-form-item label="评价内容">
<el-input v-model="form.comment_content" type="textarea"></el-input>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
action="http://localhost:8081/upload/file"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="uploadSuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item style="margin-top: 15px">
<el-button type="primary" @click="submitForm">提交评价</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Comment",
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
img_url_list:[],
form: {
comment_username: window.sessionStorage.getItem("token"),
comment_content: '',
comment_img_url: ''
}
};
},
methods: {
uploadSuccess(response, file, fileList) {
this.img_url_list.push(response.data);
},
handleRemove(file, fileList) {
console.log(1, this.img_url_list);
let name = file.response.data;
for (let i=0; i<this.img_url_list.length; i++){
if (this.img_url_list[i] == name){
this.img_url_list.splice(i, 1)
}
}
console.log(1, this.img_url_list);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
submitForm() {
if(this.img_url_list.length > 0){
let str = '';
for (var i = 0; i < this.img_url_list.length; i++) {
str += this.img_url_list[i]+ ",";
}
str = str.substr(0, str.length - 1);
this.form.comment_img_url=str;
}
this.$http.post("/comment/add", this.form).then(result => {
this.$message.success("评论成功");
this.$router.push('/order');
})
}
},
created() {
let orderId = this.$route.query.orderId;
this.form.order_id = orderId;
}
}
</script>
<style scoped>
.comment-wrapper{
margin: 15px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border-radius: 15px;
height: 500px;
}
/deep/ .el-form-item{
width: 50%;
margin: 15px auto;
}
/deep/ .el-textarea__inner{
height: 150px;
}
.avatar-uploader {
display: flex;
justify-content: center;
align-items: center;
}
.avatar {
width: 100px;
height: 100px;
object-fit: cover;
}
.avatar-uploader-icon {
font-size: 28px;
color:
}
</style>
图片预览
<div class="comment-img" v-for="img in item.comment_img_list">
<img :src="img" @click="open(img)"/>
</div>
open(src){
this.$alert('<img style="width: 100%" src="'+src+'"></img>', '', {
dangerouslyUseHTMLString: true
});
},
后台代码
package com.wang.wangblog.controller.admin;
import com.wang.wangblog.config.Constants;
import com.wang.wangblog.model.Vo.Result;
import com.wang.wangblog.utils.MyBlogUtils;
import com.wang.wangblog.utils.ResultGenerator;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
@Controller
@RequestMapping("/admin")
public class UploadController {
@Value("${upload.path:E:\\imgs}")
private String path;
@PostMapping({"/upload/file"})
@ResponseBody
public Result upload(HttpServletRequest httpServletRequest, @RequestParam("file") MultipartFile file) throws URISyntaxException {
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//生成文件名称通用方法
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
Random r = new Random();
StringBuilder tempName = new StringBuilder();
tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);
String newFileName = tempName.toString();
String month = new SimpleDateFormat("yyyyMM").format(new Date()) + File.separator;
String destPath = path + month;
File fileDirectory = new File(destPath);
//创建文件
File destFile = new File(destPath + newFileName);
try {
if (!fileDirectory.exists()) {
if (!fileDirectory.mkdir()) {
throw new IOException("文件夹创建失败,路径为:" + fileDirectory);
}
}
file.transferTo(destFile);
} catch (IOException e) {
e.printStackTrace();
}
Result result = ResultGenerator.genSuccessResult();
result.setData(MyBlogUtils.getHost(new URI(httpServletRequest.getRequestURL() + "")) + "/upload/" +month+ newFileName);
return result;
}
}