<template>标签:antdvue,false,预览,form,res,100px,四张,file,reader From: https://www.cnblogs.com/connie256/p/17077168.html
<div ref="classReview">
<a-modal
:body-style="modalStyle"
:confirm-loading="confirmLoading"
:footer="null"
:getContainer="()=>$refs.classReview"
:visible="isVisible"
:width="600"
title="点评课程"
@cancel="handleCancel"
>
<div class="modalBox">
<div class="infoBox flex flex-sb">
<span>学期</span>
<span>教学周</span>
<span>课程</span>
<span>老师</span>
</div>
<div class="formBox">
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
layout="vertical"
>
<a-form-model-item label="评价得分(满分100)" prop="score">
<a-input v-model="form.score"></a-input>
</a-form-model-item>
<a-form-model-item label="上传照片(最多4张)" prop="urlList">
<input
id="uplode"
ref="imgFile"
accept=".jpeg,.png,.gif,.jpg"
hidden
multiple="multiple"
type="file"
@change="uploadFile($event)"
/>
<!-- 图片预览-->
<div class="imgsBox flex">
<div v-for="(urlImg,uIndex) in form.urlList" class="imgBox">
<img :src="urlImg">
<div class="previewIcon">
<a-icon :style="{fontSize:'20px',marginRight:'16px'}" type="eye" @click="previewImg(urlImg)"/>
<a-icon :style="{fontSize:'20px'}" type="delete" @click="delImg(uIndex)"/>
</div>
</div>
<div v-if="form.urlList.length<4" class="uploadBox" @click="$refs.imgFile.click()">
<a-icon type="plus"/>
<span>文件上传</span>
<a-modal :footer="null" :visible="previewVisible" @cancel="previewVisible=false">
<img :src="previewImage" alt="example" style="width: 100%"/>
</a-modal>
</div>
</div>
</a-form-model-item>
<a-form-model-item label="意见与建议(200字内)" prop="advice">
<a-input v-model="form.advice" :auto-size="{ minRows: 3, maxRows: 10 }" :maxLength="200"
type="textarea"></a-input>
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 8, offset: 16 }">
<span class="btn_default" style="margin-left: 10px;" @click="handleCancel">
取消
</span>
<span class="btn_primary" @click="submitForm">
提交
</span>
</a-form-model-item>
</a-form-model>
</div>
</div>
</a-modal>
</div>
</template>
<script>
import Cookies from "js-cookie";
const modalStyle = {
height: '500px',
width: '600px',
overflowY: 'scroll'
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
export default {
components: {},
props: {
isShowDialog: {
type: Boolean,
default: false
},
courseId: {
type: String
},
},
data() {
return {
modalStyle,
confirmLoading: false,
previewVisible: false,
previewImage: '',
labelCol: {span: 8},
wrapperCol: {span: 10},
other: '',
form: {
score: 0,
urlList: [],
advice: ''
},
rules: {
score: [{
required: true,
pattern:/^100$|^(\d|[1-9]\d)(\.\d{1,4})*$/,
message: '请输入1-100数字,最多可保留四位小数',
trigger: 'change'
},],
advice: [{required: true, message: '请填写问卷须知', trigger: ['blur', 'change']}],
},
}
},
computed: {
isVisible: {
get() {
return this.isShowDialog
},
set(val) {
this.$emit('update:isShowDialog', val)
}
}
},
mounted() {
},
methods: {
uploadFile(e) {
let files = e.target.files;
let file = files[0];
let formData = new FormData();
formData.append('file', file);
console.log("文件:", formData);
api.uploadFile(formData).then((res) => {
if (res.code === 200) {
this.form.urlList.push(res.data.HttpUrl)
}
})
},
previewImg(url) {
this.previewImage = url
this.previewVisible = true;
},
delImg(index) {
this.form.urlList.splice(index, 1)
},
handleCancel(e) {
this.$emit('update:isShowDialog', false)
},
submitForm() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
console.log('submit!', this.form);
this.$emit('updateReviews',this.form)
this.$emit('update:isShowDialog',false)
// api.saveQInfo(this.form).then(res => {
// if (res.code == 200) {
// this.$message.success('提交成功!')
// this.questionnaireId = res.data.questionnaireId
// let temp = {
// "copyQuestionnaireId": this.questionnaireId,
// "questionnaireId": this.oldQuestionnaireId
// }
// api.copyQuestion(temp).then(res => {
//
// })
// this.current++
// }
// })
} else {
console.log('error submit!!', this.form);
return false;
}
});
},
}
}
</script>
<style lang="less" scoped>
@import "@/style/variables.less";
/deep/ .ant-modal-header {
border-bottom: none;
}
.formBox {
.imgsBox {
.imgBox {
position: relative;
margin-right: 12px;
img {
width: 100px;
height: 100px;
}
.previewIcon {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: transparent;
&:hover {
display: block;
color: #fff;
background-color: rgba(255, 255, 255, .5);
}
}
}
.uploadBox {
width: 100px;
height: 100px;
border: 1px solid #e7e7e7;
color: #999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}
</style>