vue+element 上传

介绍：

1.单个与多个，就是限制个数不一样；其次就是v-model，一个是字符串，一个是数组，获取详情和提交时map生成fileList就可以了。
2.图片都可预览删除，超过限制后上传按钮隐藏。

一、单个上传：

效果如图：


html:

<el-form :model="newTeam" status-icon :rules="newTeamRules" ref="newTeam" label-width="120px" class='docorTeam'> 
 <el-Row>
  <el-form-item label="上传头像：" prop="headUrl" size="small" :rules="[{ required: true, message: '请上传', trigger: 'change'}]">
    <el-upload
      :action='$my.api+"/upload/upload"'
      list-type="picture-card"
      name='files'
      :file-list="fileList"
      :limit="1"
      :class="{imgHide:hideUpload}"
      :on-preview="handlePictureCardPreview"
      :on-success='uploadOk'
      :on-remove="handleRemove"
      :on-change="imgChange"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-form-item>
</el-Row> 

  
  <el-footer class="posFix bottom0 left0 bgf foot flex alic juste">
    <el-button @click="isShowDetail = false" size="small">返回</el-button>
    <el-button type="primary" @click="submitNewTeam('newTeam')" size="small">提交</el-button>
  </el-footer>
</el-form>

data:

data() {
  return {
    newTeam:{
      headUrl:''
    },
    newTeamRules: {
      headUrl: [{ required: true, message: '请输入', trigger: 'blur'}],
    },
    isShowDetail:false,

    dialogImageUrl: '',
    dialogVisible: false,
    fileList: [],
    hideUpload: false,
  }
},

methods：

handleRemove(file, fileList) {
  console.log(file, fileList)
  this.fileList = fileList
  this.newTeam.headUrl = ''
  this.hideUpload = fileList.length >= 1;
},
handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},
uploadOk(response, file, fileList) {
  console.log(response, file, fileList)
  this.fileList.push({name:file.name,url:response})
  this.newTeam.headUrl = response
},
imgChange(file,fileList){
  this.hideUpload = fileList.length >= 1;
},
submitNewTeam(formName){ //新增
  this.$refs[formName].validate((valid) => {
    if (valid) {
     //操作
     this.hideUpload = false
     this.fileList = []
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

css:

.foot{margin-left: 200px;width:calc(100% - 200px)}
//修改组件大小为100px
.docorTeam >>> .el-upload--picture-card{width:100px;height: 100px;line-height: 106px;}
.docorTeam >>>.el-upload-list--picture-card .el-upload-list__item{width:100px;height: 100px;}
//隐藏上传按钮
.imgHide >>> .el-upload--picture-card {
	display: none;
}

二、多个上传：

效果如图：

html:

<el-form status-icon :model="imgForm" ref="imgForm"  label-width="100px"> 
  <el-Row>
    <el-form-item prop="url" size="small" :rules="[{ required: true, message: '请上传', trigger: 'change'}]">
      <el-upload
        :action='$my.api+"/upload/upload"'
        list-type="picture-card"
        name='files'
        :class="{imgHide:hideUpload}"
        :file-list="fileList"
        :limit="5"
        :on-preview="handlePictureCardPreview"
        :on-success='uploadOk'
        :on-remove="handleRemove"
        :on-change="imgChange"
        >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
  </el-Row>
</el-form>
<span slot="footer" class="dialog-footer">
 <el-button @click="dialogImgVisible = false">取 消</el-button>
  <el-button type="primary" @click="submitImg('imgForm')">确 定</el-button>
</span>

data:

data() {
  return {
    dialogImgVisible:false,
    dialogImageUrl: '',
    dialogVisible: false,
    fileList: [],
    imgForm:{
    	url:'',
    },
    hideUpload: false,
  }
},

methods:

showUpImg(val){
  this.rowData = val
  this.hideUpload = false
  this.fileList = []
  this.formDetail.imageId = ''
  this.dialogImgVisible = true
},
handleRemove(file, fileList) {
  console.log(file, fileList)
  this.fileList = fileList
  this.hideUpload = fileList.length >= 5;
},
handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},
uploadOk(response, file, fileList) {
  console.log(response, file, fileList)
  this.fileList.push({name:file.name,url:response})
},
imgChange(file,fileList){
  this.hideUpload = fileList.length >= 5;
},
submitImg(formName){
  let arr = []
  this.fileList.map((item)=>{
    arr.push(item.url)
  })
  let data ={
    url:arr.join(','),
  }
  this.imgForm.url = arr.join(',')
  this.$refs[formName].validate((valid) => {
    if (valid) {
      this.$axios.post(this.$my.api + '/bms/healRecord/saveImage', data).then(res => { 
          if(res.data&&res.data.code === 200){  
               
          }else{
          
          } 
      }).catch(function (error) {})
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

css:

.imgHide >>> .el-upload--picture-card {
	display: none;
}