<template>
    <el-upload
 :on-preview="previewFile"
  limit="1"
  :on-change="changeFile"
  :auto-upload="false" 
  :data="uploadForm.data">
   <template #trigger>
      <el-button size="small" type="primary">选取附件</el-button>
   </template>
   <el-button style="margin-left: 10px;" size="small" type="success" 
    @click="submitUpload">上传到服务器</el-button>
</el-upload>
</template>
 
<script setup lang="ts">
import {ref, reactive} from "vue";
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import {ElMessage, type UploadFile} from 'element-plus';
import myAxios from "@/api/myAxios";
const file = ref()
 
const changeFile = (uploadFile: UploadFile) => {
    file.value = uploadFile;
    console.log(file.value.raw)
}
const uploadForm = reactive({
    data: {
        fileId: '',
        name: '',
        type: ''
    }
})
const submitUpload = async () => {
    const jsonStr = JSON.stringify(uploadForm.data);
    const blob = new Blob([jsonStr], {
        type: 'application/json'
    });
    let formData = new FormData();
    formData.append("obj", blob);
    // 这里很重要 file.value.raw才是真实的file文件，file.value只是一个Proxy代理对象
    formData.append("file", file.value.raw);
    const res = await myAxios.post('/file/upload/server/not_login',{
        biz: 'test',
        file: formData.get("get")
    })
    console.log(res)
    // axios({
    //     method,
    //     url,
    //     data: formData,
    //     headers
    // }).then(res => {
    //     console.log(res);
    //     console.log(res.data);
    // });
}
</script>