element使用el-upload组件实现自定义方法上传图片或者文件

<template>
  <el-upload
    :headers="headers"
    action="##"
    :http-request="uploadServerLog"
  >
    <el-button size="small" type="primary">上传</el-button>
  </el-upload>
</template>

<script>
    // upload为自己业务的后端上传接口,自行更换
    import {upload} from "@/api/terminalApplication";
    export default {
        data() {
            return {}
        },
        //  需要获取token
        computed: {
          headers() {
            return {
              'Authorization': 'Bearer ' + this.$store.state.user.token // 直接从本地获取token就行
            };
          }
        },
        methods: {
          // uploadServerLog方法 是页面中 el-upload 组件 :http-request所绑定的方法;
          uploadServerLog(params) {
            const file = params.file;
            // 根据后台需求数据格式
            const form = new FormData();
            // 文件对象
            form.append('file', file);
            // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action

            // 将form作为参数传给后台上传接口即可
            upload(form).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err);
            });
          },
        }
    }
</script>