zdppy_api+vue3+antd实现文件上传功能

后端代码

因为zdppy框架是一个低代码框架，所以后端接口是特别简单的一句话就能搞定。

import api
import upload
from api.middleware import corssave_dir = "uploads"app = api.Api(routes=[upload.upload("/upload", save_dir)],middleware=[cors(),]
)if __name__ == '__main__':app.run()

前端代码

经过大量的尝试以后，前端代码最终以自定义请求方法的形式成功了。

<template><a-uploadv-model:file-list="fileList"name="file"action="http://127.0.0.1:8888/upload":custom-request="customRequest"><a-button><upload-outlined></upload-outlined>Click to Upload</a-button></a-upload>
</template>
<script setup>
import {ref} from 'vue';
import {UploadOutlined} from "@ant-design/icons-vue";
import axios from "axios";const fileList = ref([]);const customRequest = (option) => {const formData = new FormData();const fileUrl = "http://127.0.0.1:8888/upload";formData.append('file[]', option.file);axios.postForm(fileUrl, {file: option.file,}).then(res => {console.log(res)})
}
</script>