vue+element-ui上传图片

<template>
  <div class="form-page">
    <el-form ref="inform" v-loading="loading || searchLoading" label-width="120px" :model="inform" :rules="rules" :inline="true" class="cus-form">
		<el-col :span="24" class="img-upload-border">
		  <el-form-item prop="attchFiles">
			<el-upload
			  :action="action"
			  :headers="headers"
			  list-type="picture-card"
			  :on-preview="handlePreview"
			  :auto-upload="true"
			  :file-list="fileList"
			  :accept="accept"
			  :on-success="successHandler"
			  :limit="4"
			  :before-upload="beforeUpload"
			  :before-remove="beforeRemove"
			  :on-remove="handleRemove"
			  :on-exceed="exceed"
			>
			  <i slot="default" class="el-icon-plus" />
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		  </el-form-item>
		  <span class="notice" style="display: block">
			*注：上传线索图片，最少3张最多4张图片。每张图片大小不超过5MB。文件类型支持bmp、jpg、jpeg、png。
		  </span>
		</el-col>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'ClueAddEbike',
  data() {
    var validateWfzp = (rule, value, callback) => {
      if (!value || value.length < 3) {
        callback(new Error('请上传3~4张线索照片'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      disabled: false,
      action: window._config.default_service + 'comm/file/uploadPic',
      ebikeSearch: window._config.ebike_search,
      accept: '.bmp,.jpg,.jpeg,.png',
      acceptList: ['bmp', 'jpg', 'jpeg', 'png'],
      headers: '',     
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      rules: {
        attchFiles: [
          { validator: validateWfzp, trigger: 'blur' }
        ]
      },
      roadVisible: false
    }
  },
  created() {
    this.headers = { token: getToken() }
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        if (file && file.size > 1024 * 1024 * window._config.max_uploadSize) {
          this.$message({
            type: 'warning',
            message: `单张图片不能超过${window._config.max_uploadSize}M`
          })
          return reject(false)
        }
        if (file) {
          let suffix = file.name.substring(file.name.indexOf('.') + 1, file.name.length)
          if (!this.acceptList.includes(suffix)) {
            this.$message({
              type: 'warning',
              message: `图片类型错误`
            })
            return reject(false)
          }
        }
        return resolve(true)
      })
    },
    beforeRemove(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}?`)
      }
    },
    handleRemove(file, fileList) {
      if (file && file.status === 'success') {
        this.fileList = fileList
        let data = file.response.data[0]
        let dataParam = `bucketName=${data.bucketName}&objectName=${data.objectName}`
        delFile(dataParam)
        this.inform.attchFiles = _.filter(this.inform.attchFiles, item => {
          return item.wjmc !== data.objectName
        })
      }
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    successHandler(response, file, fileList) {
      this.fileList = fileList
      let resData = response.data[0]
      let json = {
        wjdz: resData.bucketName,
        ywlx: 'inform_file',
        wjmc: resData.objectName
      }
      this.inform.attchFiles.push(json)
    },
    exceed(file, fileList) {
      this.$message({
        type: 'warning',
        message: '最多上传4张'
      })
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/form.scss';

.img-list {
  width: 236px;
  height: 150px;
  margin-top: 1rem;
  margin-right: 10px;
}

.img-out-border {
  width: 98%;
  margin-top: 1rem;
  display: inline-block;
  text-align: center;
  border: 1px dashed #797979;
  border-radius: 4px;
  span {
    color: #ccc;
    font-size: 14px;
    font-weight: 400;
    display: flow-root;
    margin-bottom: 10px;
  }
}
.img-inner-border {
  height: 172px;
  display: inline-block;
  margin: 30px 0 10px 0;
  border: 1px solid #ccc;
  .img-container {
    width: 280px;
    height: 158px;
    margin: 6px 10px
  }
}
.img-upload-border {
  border: 1px dashed #797979;
  border-radius: 4px;
  padding: 22px 5px 0 8px;
  width: 90%;
}

</style>