el-upload上传多张图片

第一部分：el-upload

一、上传完毕后，隐藏上传框

//js
<el-upload
:class="this.fileList.length >=9 ?'hide':'display'">
</el-upload>
//css
<style>
.hide /deep/ .el-upload--picture-card{
  display:none
}
.display /deep/ .el-upload--picture-card{
  width:68px;
  height: 68px;
}
</style>

二、el-upload图片的放大功能

<el-upload
:on-preview = "handlePreview"></el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="ruleForm.imageUrl" alt="">
</el-dialog>
data(){
return{
      dialogVisible: false,
}}
onPreview (file) {
      this.ruleForm.imageUrl = file.url
      this.dialogVisible = true
    },

三、el-upload图片的删除功能

handleRemove(file,fileList){
    //file是点击删除的图片  将非file.uid的项筛选出来留下即可
    this.fileList = fileList.filter(item => {return item.uid !== file.uid}) 
    // 取出fileList中的imageUrl 用,拼接传给后端
    this.ruleForm.imageUrl = this.fileList.map(function(item){
            return item.response.data.imageUrl;
        }).join(",");
    console.log(this.ruleForm.imageUrl,'this.ruleForm.imageUrl==========')
},

四、el-upload图片的上传功能

handlePhotoSuccess (res, file, fileList) {
  //code为0 上传 imageurl拼接
  if (res.code === '0') {
          this.ruleForm.imageUrl = this.fileList.map(function(item){
              return item.response.data.imageUrl;
            }).join(",");
      } else {
  //code不为0  错误提示
        this.$message.error(res.msg)
      }
    },

---

第二部分：el-form-item

el-form-item校验

缺陷1）：校验偶尔会提示英文

解决：

1）不在标签中使用reuqired，而是在rules中定义规则

错误写法：

<el-form-item required></el-form-item>

正确写法：

//注意点：prop的属性名和v-model的属性名要一致
<el-form
：model="ruleForm"
:rules="rules"
>
<el-form-item prop="hiddenDangerName">
<el-input v-model="ruleForm.hiddenDangerName" :maxlength=48 ></el-input>
</el-form-item>
</el-form>

缺陷2）：在时间选择校验时，用户尚未选择完毕，提前显示空提示

错误写法：

 happenTime: [
          { required: true, message: '发现时间不能为空'}]

改进: 写时间校验函数

//定义校验方法：
function timerValidator (message, trigger = 'blur') {
  return {
    validator (rule, value, callback) {
      if (value != '') {
        callback()
      } else {
        callback(new Error(message))
      }
    },
    trigger: trigger
  }
} 
//rules中调用：
 happenTime: [
   timerValidator('发现时间不能为空')]

扩展知识：

1.Element UI表单规则的validator函数用法

https://www.jianshu.com/p/b69adfad263d

2.对对象中的多个项进行校验 

3.对起始时间和结束时间的校验

---

第三部分：Scrollbar 滚动条的使用

---

第四部分  深层次样式修改

scss样式中   ::v-deep .className{}

less样式中    /deep/

scss和less的对比学习

---

第五部分：el-date-picker

缺陷1）：发现时间清空按钮

缺陷2）：时间格式中大小写导致的时间转化问题