Typescript 中this的简单使用

在编写一个上传文件的组件的时候, 和之前使用的Javascript不同, this 无法在未声明的情况下使用, 在网上找了一通, 需要在函数里首位声明this

function uploadfile(this: any, e: any): void {
  this.name = "hello";
}

用的 Vite + Vue3 + TypeScript 编写的简单上传组件
后端是 Python3 + FastAPI 写的

<template>
  <div class="Upload">
    <input name="file" type="file" @change="uploadfile" />
    <p>filename: {{ filename }}</p>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import axios from "axios";
export default {
  name: "Upload",
  setup() {
    var filename = ref("");
    function uploadfile(this: any, e: any): void {
      var filename_in = filename;
      const file = e.target.files[0];
      const param = new FormData();
      param.append("file", file);
      console.log(param.get("file"));
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };

      axios
        .post("http://127.0.0.1:8070/upload/", param, config)
        .then((response) => {
          console.log(response.data);
          this.filename = response.data.filename;
        })
        .catch(function (error) {
          console.log(error);
        })
        .finally(function () {
          console.log("end");
          return "end";
        });
    }
    return {
      filename,
      uploadfile,
    };
  },
  props: {},
};
</script>


<style>
</style>

from fastapi import FastAPI, UploadFile, File
from pydantic.types import List
from starlette.responses import JSONResponse, HTMLResponse

app = FastAPI()


@app.post("/upload/")
async def create_upload_files(file: UploadFile = File(...)):
    return JSONResponse(
        {'filename': file.filename}, headers={"Access-Control-Allow-Origin": "*"}
    )