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

最新推荐文章于 2024-05-16 22:29:21 发布

qq_46302247

最新推荐文章于 2024-05-16 22:29:21 发布

阅读量4.1k

点赞数 2

分类专栏： vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46302247/article/details/129204881

版权

vue 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

要求：上传格式为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
},