使用elementui的上传控件实现图片上传

<template>
    <el-upload class="upload-demo" :limit="1" :on-exceed="handleExceed" :show-file-list="true"
        :headers="uploadHeaders" action="/jt-home-manage/base/oss/upload" list-type="picture-card"
        :on-preview="handlePreview" :on-success="handleSuccess"
        :on-error="handleError">
        <i class="iconfont icon-tupian" style="font-size: 38px;"></i>
    </el-upload>
    
    <!-- 图片预览 -->
    <el-dialog :visible.sync="previewImgVisible" class="preview-img">
        <img width="100%" :src="previewImageUrl" alt="">
    </el-dialog>
</template>

<script>
data(){
     previewImageUrl: "",
     previewImgVisible: false,
     uploadHeaders: { 'Authorization': 'Bearer ' + this.$store.getters.token, 'deviceSign': 'web', 'version': '3.5.8' },
},
methods: {
     handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传一张图片，请删除之前的图片再重新上传`);
    },
     handlePreview(file) {
      this.previewImageUrl = file.url;
      this.previewImgVisible = true;
    },
    handleError(err, file, fileList) {
      this.$message({
        message: '图片上传失败',
        type: "error"
      })
    },
    handleSuccess(response, file, fileList) {
      if (file.response.code == 20000) {
        this.newProductForm.coverImage = file.response.data;
      }
    }
}
</script>

<style scoped lang="scss">
 .upload-container {
    .upload-demo {
      width: auto !important;
      display: flex;

      ::v-deep .el-upload--picture-card {
        overflow-y: hidden;
        display: flex !important;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>