一、顯示界面部分：

 <el-upload
          ref="upload"
          action=""
          :auto-upload="false"       //禁止自動(dòng)上傳
          :file-list="fileList"    //上傳的文件列表
          :limit="limit"  // 最大允許上傳個(gè)數(shù)
          :class="{hide:hideUpload}"   //上傳按鈕
          :on-change="beforeAvatarUpload"  // 文件狀態(tài)改變時(shí)的方法
          :on-exceed="masterFileMax"  //文件超出個(gè)數(shù)限制時(shí)的方法
          :on-preview="handlePictureCardPreview"  //點(diǎn)擊文件列表中已上傳的文件時(shí)的方法
          :on-remove="handleRemove"   //文件列表移除文件時(shí)的方法
          list-type="picture-card"  //文件列表的類型
          multiple  //	是否支持多選文件
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="form-tips" style="margin-top: 10px" >
            <el-tag  type="warning">最多上傳5張，最大上傳大小2MB</el-tag>
          </div>
        </el-upload>
        <el-dialog 
        	:visible.sync="dialogVisibles" 
        	append-to-body 
        	class="dialog1" 
        	width="40%">
          <img :src="dialogImageUrl" alt="" class="ims">
        </el-dialog>

二、data部分：

  data() {
    return {
      dialogImageUrl: '',   //瀏覽圖片的路徑
      fileList: [],    //圖片列表
      imgs: [],  
      limit: 5,  //上傳圖片的數(shù)量
      dialogVisibles: false,  //控制瀏覽圖片的對(duì)話框顯示隱藏
      hideUpload: false,   // 判斷是否隱藏上傳按鈕
      isAdd: true,   //判斷對(duì)應(yīng)的操作
  },

三、methods部分：

//上傳圖片，添加到圖片列表
 beforeAvatarUpload(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!')
        return
      }
      //圖片轉(zhuǎn)為base64位
      let _this = this
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = function(e) {
        undefined
        _this.imgs.push(this.result)
      }
      //添加
      this.construction.images = this.imgs
      //編輯
      this.construction.addImages = this.imgs
      //達(dá)到限制上傳圖片，隱藏上傳按鈕
      this.hideUpload = fileList.length >= this.limit;
    },
    //刪除圖片，更新圖片列表
    handleRemove(file, fileList) {
      //達(dá)到限制上傳圖片，隱藏上傳按鈕
      this.hideUpload = fileList.length >= this.limit;
      //isAdd用于判斷是否對(duì)應(yīng)的操作  true：添加   false：編輯
      if (this.isAdd) {
        const reader = new FileReader()
        reader.readAsDataURL(file.raw)
        let _this = this
        reader.onload = function(e) {
          undefined
          for (const i in _this.construction.images) {
            if (_this.construction.images[i] === this.result) {
              _this.construction.images.splice(i, 1)
            }
          }
        }
      } else {
        if (file.raw) {
          const reader = new FileReader()
          reader.readAsDataURL(file.raw)
          let _this = this
          reader.onload = function(e) {
            undefined
            for (const j in _this.construction.addImages) {
              if (_this.construction.addImages[j] === this.result) {
                _this.construction.addImages.splice(j, 1)
              }
            }
          }
        } else {
          //回顯圖片，執(zhí)行刪除并添加到圖片列表（后端服務(wù)器接受的圖片列表中）
          this.construction.delImages.push(file.url)
        }
      }

    },
    //圖片瀏覽
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisibles = true
    },
    //限制多少?gòu)垐D片
    masterFileMax(files, fileList) {
      this.$message.warning(`請(qǐng)最多上傳 ${this.limit} 個(gè)文件。`)
    },

持續(xù)更新中文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-616204.html

到了這里，關(guān)于vue使用element-ui上傳多張圖片、回顯，編輯、刪除、上傳數(shù)量以及上傳按鈕的隱藏的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！