el-upload小计 picture-card

 

template

<template>
  <div>
    <el-upload  ref="pictureRef"
                :action="fileUploadUrl"
                list-type="picture-card"
                :file-list="pictureFileList"
                :on-exceed="pictureHandleExceed"
                :limit="3"
                :auto-upload="false"
                :before-upload="pictureBeforeUploadHandle"
                :on-change="pictureHandleChange"
                :on-preview="handlePictureCardPreview"
                :on-remove="pictureHandleRemove"
                :on-success="pictureHandleSuccess"
    ><i class="el-icon-plus"></i></el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileUploadUrl: '',
      pictureFileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  activated () {
    this.fileUploadUrl = '上传地址'
  },
  methods: {
    dataFormSubmit () {
      // 现场图片上传 
      // this.$refs.pictureRef.submit()
    },
    // 现场图片超出限制提醒
    pictureHandleExceed () {
      this.$message({ type: 'error', message: '最多支持3个现场图片上传' })
    },
    // 上传之前
    pictureBeforeUploadHandle (file) {
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        this.$message.error('只支持jpg、png、gif格式的图片！')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        return false
      }
    },
    // 预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 移除图片
    pictureHandleRemove (file, fileList) {
      // console.log('handleRemove' + JSON.stringify(file))      // 删除的当前文件
      // console.log('handleRemove' + JSON.stringify(fileList))  // 剩余的图片文件
    },
    pictureHandleChange (file, fileList) {
      // console.log('handleChange' + JSON.stringify(file))      // 当前选择上传或者移除的的图片
      // console.log('handleChange' + JSON.stringify(fileList))  // 剩余的图片文件
    },
    // auto-upload="true" 上传通知
    pictureHandleSuccess (response, file, fileList) {
      // 当前文件处理的结果(由服务器返回)
      // {"msg":"success","code":0,"url":"https://xxx.com/statices/admin/541e71db-3e2d-411d-b5fa-5fff8420ead614.png"}
      console.log('handleSuccess' + JSON.stringify(response))

      // 当前文件的详情
      // {"status":"success","name":"14.png","size":7987,"percentage":100,"uid":1646979474085,"raw":{"uid":1646979474085},"url":"blob:http://127.0.0.1:8001/d95fe2b5-356c-448a-a621-c24fc91dfdaf","response":{"msg":"success","code":0,"url":"https://xxx.com/statices/admin/541e71db-3e2d-411d-b5fa-5fff8420ead614.png"}}
      console.log('handleSuccess' + JSON.stringify(file))

      // 上传后剩余的文件的详情集合
      // [
      //  {"status":"success","name":"14.png","size":7987,"percentage":100,"uid":1646979441088,"raw":{"uid":1646979441088},"url":"blob:http://127.0.0.1:8001/2d768f78-dd34-4519-80e9-dbf1f39d0c83","response":{"msg":"success","code":0,"url":"https://xxx.com/statices/admin/dd4eeb80-e03e-4b90-a45f-bbcc3f63c69c14.png"}},
      //  {"status":"success","name":"14.png","size":7987,"percentage":100,"uid":1646979474085,"raw":{"uid":1646979474085},"url":"blob:http://127.0.0.1:8001/d95fe2b5-356c-448a-a621-c24fc91dfdaf","response":{"msg":"success","code":0,"url":"https://xxx.com/statices/admin/541e71db-3e2d-411d-b5fa-5fff8420ead614.png"}}
      // ]
      console.log('handleSuccess' + JSON.stringify(fileList))
      this.fileList = fileList
      if (response && response.code === 0) {
        this.$message({message: '上传成功', type: 'success'})
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>
<style scoped>
.div-inline {
  display: inline
}

</style>