vue3 ts element-plus 文件上传

好的，针对你的问题，我可以给出以下代码示例作为参考：

首先，你需要在项目中安装 Element Plus 和 axios：

npm install element-plus axios

然后，在你的 Vue 组件中，可以这样实现文件上传功能：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-api"
    :headers="headers"
    :multiple="false"
    :data="data"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-error="handleError"
    :auto-upload="false"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default defineComponent({
  components: { ElMessage },
  setup() {
    const file = ref(null);
    const headers = { Authorization: 'Bearer ' + localStorage.getItem('token') };
    const data = { projectId: 1 };
    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }
      return true;
    };
    const handleSuccess = (response, file, fileList) => {
      this.$message.success('上传成功');
    };
    const handleError = (error, file, fileList) => {
      this.$message.error('上传失败');
    };
    const submitUpload = () => {
      const formData = new FormData();
      formData.append('file', file.value);
      axios.post('/your-upload-api', formData, { headers }).then((res) => {
        this.$message.success('上传成功');
      }).catch((err) => {
        this.$message.error('上传失败');
      });
    };
    return {
      file,
      headers,
      data,
      beforeUpload,
      handleSuccess,
      handleError,
      submitUpload,
    };
  },
});
</script>

在这个示例中，我们使用了 Element Plus 的 `el-upload` 组件来实现文件上传功能。其中，`action` 属性指定了文件上传的接口地址，`headers` 属性指定了请求头信息，`data` 属性指定了上传时需要携带的额外参数。我们还使用了 `beforeUpload` 属性来限制上传文件的类型和大小，以及 `on-success` 和 `on-error` 属性来处理上传成功和失败后的回调。

注意，在这个示例中，我们使用了 `axios` 来发送文件上传请求。在 `submitUpload` 方法中，我们使用了 `FormData` 对象来构造上传的数据，并将其作为参数传递给 `axios.post` 方法。

希望这个示例能够帮到你！