58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
|
<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>
|