< 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:
}
< /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; } } ![个人信息-求职[web前端]](http://pic.xiahunao.cn/个人信息-求职[web前端])
)
)
