el-upload的使用，list-type=“picture-card“(照片墙)

要求：上传格式为jpg文件，不限制数量

<el-form-item label="图片：" prop="imgFileList">
  <el-upload
    action=""
    :auto-upload="false"
    :on-change="imgHandleChange"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="saleForm.imgFileList"
    list-type="picture-card"
  >
    <i class="el-icon-plus" />
    <div slot="tip" class="el-upload__tip">支持批量上传，上传格式为jpg文件</div>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</el-form-item>
           

saleForm: {
  imgFileList: [], // 图片列表
},
rules: {
 imgFileList: [
   {
     message: '请先上传图片',
     trigger: 'change',
     required: true,
   },
 ],
},
dialogImageUrl: '',
dialogVisible: false, // 图片预览
           

// 图片上传
imgHandleChange(file, fileList) {
  if (!/\.(jpg|JPG)$/.test(file.name)) {
    this.$message({
      type: 'warning',
      message: '只支持格式为jpg/JPG的文件！'
    })
    fileList.pop()
    return false
  }
  this.saleForm.imgFileList = fileList
},

// 点击列表中已上传的图片时的钩子
handlePreview(file) {
  this.dialogImageUrl = file.url
  this.dialogVisible = true
},

// 移除图片
handleRemove(file, fileList) {
  this.saleForm.imgFileList = fileList
},