element 图片上传前预览 vue

<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-row>
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="form.name" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            ref="upload"
            :action="mainImageOpt.actionUpload"
            :auto-upload="false"
            :before-upload="mainImageUpload"
            class="avatar-uploader"
            :data="mainImageOpt.dataUpload"
            :on-change="mainImageChange"
            :on-error="mainImageError"
            :on-exceed="mainImageExceed"
            :on-preview="mainImagePreview"
            :on-remove="mainImageRemove"
            :on-success="mainImageSuccess"
            :show-file-list="false"
          >
            <img
              v-if="form.mainImageUrl"
              id="mainImageUrl"
              :key="mainImageUrlKey"
              class="avatar"
              :src="form.mainImageUrl"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.trim="form.sort" />
        </el-form-item>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button v-if="display" type="primary" @click="save">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getById, save } from '@/api/system/banner'

  import { enclosureAdd, getPlatformToken } from '@/api/common/enclosure'
  export default {
    name: 'ServiceEdit',
    data() {
      return {
        mainImageOpt: {
          actionUpload: '',
          dataUpload: {
            token: '',
          },
        },
        form: {
          bannerId: '',
          name: '',
          sort: '',
        },
        rules: {
          bannerId: [{ required: true, trigger: 'blur', message: '请输入' }],
          name: [{ required: true, trigger: 'blur', message: '请输入' }],
          sort: [{ required: true, trigger: 'blur', message: '请输入排序' }],
        },
        title: '',
        dialogFormVisible: false,
        display: false,
      }
    },
    mounted() {
      this.initStore()
    },
    methods: {
      async initStore() {
        const { data } = await getPlatformToken()
        this.storeParm = data
        this.mainImageOpt.dataUpload = { token: this.storeParm.token }
        this.mainImageOpt.actionUpload = this.storeParm.urlUpload
      },
      changeModify() {
        this.$forceUpdate()
      },
      async showEdit(row, display) {
        if (!row) {
          this.title = '新建'
        } else {
          this.title = '编辑'
          const { code, msg, data } = await getById({
            id: row.bannerId,
          })
          if (code != 200) {
            this.$baseMessage(msg, 'error', 'vab-hey-message-error')
          }
          this.form = Object.assign({}, data)
        }
        this.display = display
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { code, msg, data } = await save(this.form)
            if (code === 200) {
              this.form.bannerId = data
              this.mainImageSubmit()
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            } else {
              this.$baseMessage(msg, 'error', 'vab-hey-message-error')
            }
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
      mainImageSubmit() {
        this.$refs.upload.submit()
      },
      mainImageSuccess(res) {
        if (res) {
          enclosureAdd({
            enclosure_path: res.url,
            enclosure_name: res.key,
            enclosure_suffix: res.suffix,
            enclosure_classify: 2, //EnclosureClassify 轮播图
            enclosure_data_id: this.form.bannerId,
            enclosure_size: res.size,
            enclosure_height: res.height,
            enclosure_width: res.width,
          })
          this.form.mainImageUrl = this.storeParm.urlShow + res.key
        } else {
          this.$message.error('上传失败!')
        }
      },
      mainImageChange(event) {
        let url = ''
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(event.raw)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(event.raw)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(event.raw)
        }
        this.form.mainImageUrl = url
        console.log(this.form.mainImageUrl)
        this.changeModify()
      },
      mainImageExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      mainImagePreview(file) {
        debugger
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      mainImageRemove(file) {
        this.images.forEach((element, index, arr) => {
          if (file.name === element.oldFile.name) {
            arr.splice(index, 1)
          }
        })
      },
      mainImageUpload(file) {
        const isJPG =
          file.type === 'image/jpeg' ||
          file.type === 'image/jpg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif'

        const isLt2M = file.size / 1024 / 1024 < 10

        if (!isJPG) {
          this.$message.error('上传内容必须为图片!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        return isJPG && isLt2M
      },
      mainImageError(res) {
        this.$message.error(JSON.parse(res.message).msg)
      },
    },
  }
</script>
<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>