1、页面
<el-form
class="singleForm"
ref="addForm"
:model="dataFrom"
:rules="rules"
:label-width="90 * (scale > 1 ? scale : 1) + 'px'"
>
<el-form-item label="Word" prop="uploadWord">
<el-upload
class="upload-demo"
drag
action="#"
multiple
:http-request="customWord"
:show-file-list="false"
:before-upload="beforeUpload"
:file-list="fileListWord"
accept=".doc,.docx,.dot,.dotx,.docm,.dotm,.xml" >
<div v-if="added">
<i class="el-icon-upload">+</i>
<div class="el-upload__text">
<!-- 将文件拖到此处,或<em>点击上传</em> -->
<span style="color: #c0c4cc;">请将文件拖拽至此次上传</span>
</div>
</div>
<div class="conten" v-else>
<!-- <img src="~/assets/images/reportsModule/Show.png" alt="" srcset=""> -->
<div class="el-upload__text">
<span style="color: #c0c4cc;">{{ nameWord }}</span>
</div>
</div>
</el-upload>
</el-form-item>
</el-form>
2、js
// Word
customWord(options){
const formData = new FormData();
this.wordType = this.getLastPartAfterDot(options.file.name)
this.nameWord = options.file.name
this.customRequest(options)
this.convertBase64(options.file)
formData.append('file', options.file)
this.added = false
},
// word转base64
convertBase64(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
this.dataFrom.uploadWord = e.target.result
};
},
// word上传前的钩子
beforeUpload(file) {
// 清除之前的文件列表
this.fileListWord = [];
// 添加新的文件到列表
this.fileListWord.push(file);
return true;
},
//js里data 这是重点
rules: {
reportName: [
{ required: true, message: "请选择分类", trigger: "input" },
],
uploadPdf:[
{ required: true, validator: (rule, value, callback) => {
if (this.dataFrom.uploadPdf== '') {
callback(new Error('请上传文件'));
}else{
callback()
}
}},
]
},
3、点击确定
onOk() {
if(this.title === '编辑报告内容'){
this.$refs.addForm.validate((valid) => {
if (valid) {
//写接口
}