SAAS-FRONTEND/src/views/station/oilgun.vue

<template>
<div>
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :on-error="onError"
  :on-success="onSuccess"
>

  <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 {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    
    methods: {
      onSuccess(response, file, fileLis){
        console.log("onSuccess")
        console.log(response, file, fileLis)
      },
      onError(err, file, fileList){
        console.log("onError")
        console.log(err, file, fileList)
      },
      beforeUpload(file){
        console.log("beforeUpload")
        console.log(file)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>