話不多說(shuō)， 直接上代碼：

視圖層：

        <div class="contentDetail">
          <div class="contentItem">
            <div style="margin-top:5px;" class="label csAttachment">客服上傳圖片:</div>
            <el-upload
              :auto-upload="false"
              :limit="10"
              :on-change="fileChange"
              :on-remove="handleRemoveImg"
              :file-list="csImages"
              action="#"
              accept=".jpg,.jpeg,.png"
              list-type="picture-card"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img :src="file.url" class="el-upload-list__item-thumbnail" alt="" />
                <div class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveImg(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </div>
              </div>
            </el-upload>
          </div>
        </div>
        <div class="contentDetail">
          <div class="contentItem">
            <div class="label csAttachment">客服上傳視頻:</div>
            <el-upload
              :auto-upload="false"
              :limit="3"
              :on-change="changeUploadVideo"
              :file-list="csVideos"
              class="avatar-uploader"
              action="#"
              list-type="picture-card"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <video
                  :src="file.url"
                  :style="{
                    width: csVideos.length > 0 ? '200px' : 0,
                    height: csVideos.length > 0 ? '120px' : 0
                  }"
                  class="video-avatar"
                  controls="controls"
                >
                  <span>您的瀏覽器不支持視頻播放</span>
                </video>
                <div class="el-upload-list__item-actions" style="z-index:101;height:50px;">
                  <span class="el-upload-list__item-delete" @click="handleRemoveVideo(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </div>
              </div>
            </el-upload>
          </div>
        </div>

邏輯層：

// 監(jiān)聽附件相關(guān)數(shù)據(jù) 
watch: {
    // 新增圖片
    fileList: {
      async handler(newList) {
        this.fileData.imgFiles = []
        if (newList.length) {
          let fileObj = {}
          await newList.map(file => {
            // 上傳的文件流轉(zhuǎn)為base64格式
            if (file.raw) {
              getBase64File(file.raw).then(res => {
                fileObj = {
                  fileName: file.name,
                  fileBase64: res
                }
                this.fileData.imgFiles.push(fileObj)
              })
            } else {
              fileObj = {
                fileBase64: file.fileBase64,
                fileName: file.name,
                type: file.type
              }
              this.fileData.imgFiles.push(fileObj)
            }
          })
        }
      }
    },
    // 刪除已上傳圖片時(shí)
    newImgList: {
      handler: function(list) {
        let obj = {
          fileBase64: '',
          fileName: '',
          type: ''
        }
        list.map(file => {
          obj = {
            fileBase64: file.fileBase64,
            fileName: file.name,
            type: file.type
          }
        })
        this.fileData.imgFiles.push(obj)
      }
    },
    
   //添加視頻
    videoList: {
      async handler(newList) {
        this.fileData.videoFiles = []
        if (newList.length) {
          let fileObj = {}
          await newList.map(file => {
            // 上傳的文件流轉(zhuǎn)為base64格式
            if (file.raw) {
              getBase64File(file.raw).then(res => {
                fileObj = {
                  fileName: file.name,
                  fileBase64: res
                }
                this.fileData.videoFiles.push(fileObj)
              })
            } else {
              fileObj = {
                fileBase64: file.fileBase64,
                fileName: file.name,
                type: file.type
              }
              this.fileData.videoFiles.push(fileObj)
            }
          })
        }
      }
    },
    // 刪除已上傳視頻時(shí)
    newVideoList: {
      handler: function(list) {
        let obj = {
          fileBase64: '',
          fileName: '',
          type: ''
        }
        list.map(file => {
          obj = {
            fileBase64: file.fileBase64,
            fileName: file.name,
            type: file.type
          }
        })
        this.fileData.videoFiles.push(obj)
      }
    }
  },  

 
// 添加圖片文件
    fileChange(file, fileList) {
      this.fileList = fileList
      this.fileList.map((item, index) => {
        const fileSize = item.size / 1024 / 1024
        if (fileSize > 20) {
          this.$message.error('單個(gè)附件大小不能超過(guò)20M')
          this.fileList.splice(index, 1)
        }
      })

      setTimeout(() => {
        this.editFile('image')
      }, 1000)
    },

 // 添加視頻文件
    changeUploadVideo(file, fileList) {
      const fileSize = file.size / 1024 / 1024 <= 50
      if (
        ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(
          file.raw.type
        ) == -1 // 控制格式
      ) {
        this.$message.error('請(qǐng)上傳正確的視頻格式')
        return false
      }
      if (!fileSize) {
        this.$message.error('視頻大小不能超過(guò)50MB')
        return false
      }
      this.videoList = fileList

      setTimeout(() => {
        this.editFile('video')
      }, 1000)
    },

    // 移除圖片文件
    handleRemoveImg(file) {
      this.fileList.map((item, index) => {
        if (item.name === file.name) {
          // 回顯圖片時(shí)
          if (item.type === 2) {
            item.type = 1 // 2 保留 1 刪除
            this.newImgList = this.fileList.splice(index, 1)
            setTimeout(() => {
              this.editFile('image')
            }, 500)
          } else {
            // 新增圖片時(shí)
            this.fileList.splice(index, 1)
          }
        }
      })
    },

    // 移除視頻文件
    handleRemoveVideo(file) {
      this.videoList.map((item, index) => {
        if (item.name === file.name) {
          // 回顯視頻時(shí)
          if (item.type === 2) {
            item.type = 1 // 2 保留 1 刪除
            this.newVideoList = this.videoList.splice(index, 1)
            setTimeout(() => {
              this.editFile('video')
            }, 500)
          } else {
            // 新增視頻時(shí)
            this.videoList.splice(index, 1)
          }
        }
      })
    },

    // 預(yù)覽圖片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.$alert(`<img src="${this.dialogImageUrl}" width="100%">`, {
        dangerouslyUseHTMLString: true,
        callback: () => {}
      })
    },


    // 編輯附件
    editFile(type) {
      const params = {
        imgFiles: this.fileData.imgFiles,
        videoFiles: this.fileData.videoFiles,
        csClass: this.summaryDetail.csClassIds[this.summaryDetail.csClassIds.length - 1],
        csFeedbackDescribe: this.summaryDetail.csFeedbackDescribe,
        id: this.summaryDetail.id,
        role: 1,
        appPhone: this.summaryDetail.appPhone,
        sn: this.summaryDetail.sn,
        qrCode: this.summaryDetail.qrCode,
        iscallBack: 1 // 是否編輯回電  1否 2是
      }
      this.$confirm('確認(rèn)修改?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          addSummary(params) // 后端接口
            .then(res => {
              if (res.code === 0) {
                this.getSummaryList(this.activeName)
                this.$message.success(res.msg)
              }
            })
            .catch(() => {
              this.loading = false
              // 添加修改失敗，恢復(fù)原有數(shù)據(jù)
              if (type === 'image') {
                this.csImages = handleFileFormat(this.summaryDetail.csImgFiles)
              } else {
                this.csVideos = handleFileFormat(this.summaryDetail.csVideoFiles)
              }
            })
        })
        .catch(() => {
          // 取消添加修改，恢復(fù)原有數(shù)據(jù)
          if (type === 'image') {
            this.csImages = handleFileFormat(this.summaryDetail.csImgFiles)
          } else {
            this.csVideos = handleFileFormat(this.summaryDetail.csVideoFiles)
          }
        })
    }

上傳附件沒(méi)有使用單獨(dú)的上傳接口，是調(diào)用添加記錄接口時(shí)，統(tǒng)一傳參保存。添加接口請(qǐng)求成功后再回顯。

因?yàn)槲覀兊男枨笫窃谠斍轫?yè)面也能編輯圖片和視頻，所以加了`type`字段，1代表刪除，2代表保留，添加的話就不傳。如果你們的需求沒(méi)有在詳情編輯的功能，相關(guān)的邏輯可以不用管。

添加失敗或取消添加時(shí)，恢復(fù)原有數(shù)據(jù)。

視頻的時(shí)候需要注意：video標(biāo)簽的層級(jí)比較高，鼠標(biāo)hover時(shí)上面的刪除圖標(biāo)顯示不出來(lái)，手動(dòng)修改它們的`z-index`,比如:

?

?刪除圖標(biāo)的容器寬度也修改下，否則會(huì)覆蓋視頻播放按鈕。

樣式設(shè)置：

/deep/ .el-upload--picture-card {
    width: 80px;
    height: 80px;
  }
  /deep/ .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  .avatar-uploader {
    /deep/ .el-upload--picture-card {
      display: inline-block;
      width: 200px;
      height: 120px;
    }
    /deep/ .el-upload-list__item {
      display: inline-block;
      width: 200px;
      height: 120px;
    }
  }
  video {
    display: inline-block;
    position: relative;
    z-index: 100;
  }

  /deep/ .el-icon-plus {
    position: relative;
    top: -35%;
  }
  .avatar-uploader {
    /deep/ .el-icon-plus {
      position: relative;
      top: -6%;
    }
  }

上傳前：?

?上傳后：

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-612445.html

到了這里，關(guān)于el-upload上傳圖片和視頻，支持預(yù)覽和刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！