Vue【七】实现图片上传与预览

前端

图片上传

<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-uploadaction="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: #8c939d;
}
</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"})@ResponseBodypublic 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;}}