效果图
vue代码
<template>
<div class="feedback-wrap">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<div class="feedback-title">
<span>(必选)请选择您想反馈的问题点</span>
</div>
<div class="feedback-radio" >
<el-form-item prop="radio">
<el-radio v-model="ruleForm.radio" label="1">备选项</el-radio>
<el-radio v-model="ruleForm.radio" label="2">备选项</el-radio>
<el-radio v-model="ruleForm.radio" label="3">备选项</el-radio>
<el-radio v-model="ruleForm.radio" label="4">备选项</el-radio>
<el-radio v-model="ruleForm.radio" label="5">备选项</el-radio>
</el-form-item>
</div>
<div class="feedback-title">
<span>请补充详细问题很意见</span>
</div>
<div class="feedback-detail">
<el-form-item prop="desc">
<el-input type="textarea" placeholder="请输入15字以上描述" v-model="ruleForm.desc"></el-input>
</el-form-item>
</div>
<div class="feedback-title">
<div>请提供问题相关截图或照片</div>
<div>{{fileList.length}}/3</div>
</div>
<div class="feedback-img">
<van-uploader v-model="fileList"
:max-count="3"
:multiple="true"
:before-read="beforeRead"
:after-read="afterRead"
:before-delete="delUploadImg"
upload-icon="plus"
/>
</div>
<div class="activity-button" @click="submitForm('ruleForm')">
<span>提交</span>
</div>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue';
import { Uploader } from 'vant';
import {getLocal} from "../../../../assets/service/auth";
import {uploadImgs} from "../../../../assets/api/v3";
Vue.use(Uploader);
export default {
name: "feedback",
data () {
return {
ruleForm: {
desc: '',
radio:'',
},
rules: {
radio: [
{ required: true, message: '请至少选择反馈的问题点', trigger: 'change' }
],
desc: [
{ required: true, min: 15, max: 240, message: '请填写至少15字以上问题描述', trigger: 'blur' }
]
},
fileList: [
/* { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
// Uploader 根据文件后缀来判断是否为图片文件
// 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明
{ url: 'http://www.itdream.site/upload/202004/03.jpg', isImage: true },*/
],
uploadUrl: "/zz//upload/file",
headers: {
token: getLocal('token'),
},
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.fileList = this.fileList;
if(this.fileList.length == 0){
this.$message("请至少上传一张照片!")
return false;
}
// 提交逻辑
this.$message("完成后台接口")
} else {
return false;
}
});
},
/*图片上传*/
// 返回布尔值
beforeRead(file) {
if (file instanceof Array) {
//判断是否是数组
file.forEach((v) => {
this.checkFile(v);
});
} else {
this.checkFile(file);
}
return true;
},
//图片类型检查
checkFile(file) {
const format = ["jpg", "png", "jpeg"];
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
if (!format.includes(finalName.toLowerCase())) {
this.$message("请上传" + format.join(",") + "格式图片")
return false;
}
},
// 添加图片回调
afterRead(file) {
let that = this;
file.status = "uploading";
file.message = "上传中...";
this.uploadImg(file, that);
},
//上传
uploadImg(file, that) {
const formData = new FormData();
formData.append('file', file.file );
console.log(that.fileList);
axios
.post(this.uploadUrl, formData, )
.then((res) => {
/**
* {
"code": 200,
"originalUrl": "/imgs/20210516/a27c023d-1a2a-4a5e-9cde-9d662ff751b5.jpg",
"error": null,
"thumbnailUrl": "/imgs/20210516/a27c023d-1a2a-4a5e-9cde-9d662ff751b5_small.jpg"
}
*/
if (res.data.code) {
file.status = "success";
file.message = "上传成功";
file.url = res.data.originalUrl;
}
})
.catch((err) => {
this.$notify({
type: "warning",
message: "上传失败",
});
});
},
//删除
delUploadImg(item) {
this.fileList = this.fileList.filter((v) => v.url != item.url);
}
}
}
</script>
<style lang="less" scoped>
.feedback-wrap{
width: 90%;
margin: auto;
.feedback-title{
font-weight: 400;
font-size: .6rem;
color: rgba(157, 158, 157, 1);
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.feedback-radio{
border-radius: 10px;
font-size: 0.6rem;
padding: 5px 10px;
background-color: rgb(255, 255, 255);
.el-radio{
display: block;
margin: 15px 0;
}
/deep/ .el-form-item__content{
margin-left: 0px !important;
}
}
.feedback-detail{
/deep/ .el-textarea__inner{
height: 7rem;
}
/deep/ .el-form-item__content{
margin-left: 0px !important;
}
}
.feedback-img{
height: 5rem;
border-radius: 10px;
font-size: 0.6rem;
padding: 5px 10px;
background-color: rgb(255, 255, 255);
/deep/ .el-upload--picture-card{
width: 80px;
height: 80px;
line-height: 6rem;
}
/deep/ .el-upload-list__item{
width: 80px;
height: 80px;
}
}
.activity-button{
width: 85%;
height: 2.5rem;
z-index: 13;
background-color: #259b24;
color: #ffffff;
border-radius: 25px;
font-size: 1rem;
text-align: center;
opacity: 1;
margin: 25px auto;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
java代码
/**
*
* @param file
* @return
*/
@RequestMapping(value = "/file")
@ResponseBody
public Map<String, Object> doUploadFiles(@RequestParam("file") MultipartFile file) {
log.debug("Upload form save with: " + file);
Map<String, Object> map = new HashMap<String, Object>();
map = ImageCommonUtils.uploadFileAndCreateThumbnail(file);
return map;
}