【Element-UI】上传el-Upload组件的使用
1 <el-form-item label="告知书" prop="healthNotice"> 2 <el-upload 3 class="avatar-uploader" 4 action="" 5 accept=".doc,.DOC,.docx" 6 :auto-upload="false" 7 :show-file-list="false" 8 :multiple="false" 9 :on-change="handleChange" 10 :disabled="getLookInfo" 11 > 12 <svg-icon v-if="healthNotice" icon-class="doc"></svg-icon> 13 <i v-else class="el-icon-plus avatar-uploader-icon" >上传文档</i> 14 </el-upload> 15 </el-form-item>
* 如何绑定校验
通过form表单的validate与formItem的prop属性相绑定
1 const checkFIle = function (rule, value, callback) { 2 if (vm.healthNotice) { 3 callback() 4 } else { 5 callback(new Error('请选择文件')) 6 } 7 };
* 如何上传--change事件
1 handleChange (file, fileList) { 2 const vm = this; 3 const type = file.raw.type; 4 if (type !== 'application/msword' && 5 type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { 6 vm.$msg('error', '文件格式错误'); 7 return false; 8 } 9 const isLt2M = file.size / 1024 / 1024 > 2; 10 if (isLt2M) { 11 vm.$msg('error', '文件大小不能超过2M'); 12 return false; 13 } 14 const reader = new FileReader(); 15 reader.readAsDataURL(file.raw); 16 reader.onload = e => { 17 vm.healthNotice = e.target.result; 18 // 添加成功，执行校验 19 vm.$refs.formIndex.validateField('healthNotice'); 20 } 21 },
* 关于word 图片 音视频等的不同校验
1 word
type === 'application/msword'
type === 'application/vnd.openxmlformatsofficedocument.wordprocessingml.document'
2 图片
type === 'image/jpeg'
type === 'image/png'
3 音视频
type === 'audio/x-ms-wma' type === 'audio/mpeg' type === 'video/mp4' type === 'audio/mp4')
