aivfo-oa-web/src/components/FileUpload/index.vue

<template>
  <div>
    <el-upload
      ref="upload"
      :action="fileAction"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      name="file">
      <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
    </el-upload>
  </div>

</template>

<script>
import {uploadFileUrl, deleteFile} from "@/api/file/file";

export default {
  name: "index",
  data() {
    return {
      fileAction: ''
    }
  },
  created() {
    this.fileAction = uploadFileUrl()
  },
  methods: {
    handleRemove(file, fileList) {
      let url = file.response.data.url;
      deleteFile(url).then(res => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      });
      this.$emit('removeFile', url)
    },
    handleSuccess(response, file, fileList) {
      let fileUrl = response.data.url
      this.$emit('getFileUrl', fileUrl)
    },
    handleError() {
      this.$message({
        message: '上传失败，请稍候再试!',
        type: 'warning'
      });
    },
  }
}
</script>

<style scoped>

</style>