Блог

Главная - Вопросы по программированию - Как загрузить файл из интерфейса Vue в серверную часть FastAPI

Как загрузить файл из интерфейса Vue в серверную часть FastAPI

#javascript #python #vue.js #http #fastapi

#javascript #python #vue.js #http #fastapi

Вопрос:

Код Vuejs

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <div id="file-upload-list" class="container">
        <div class="large-12 medium-12 small-12 cell">
          <label>File
            <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
          </label>
            <button v-on:click="submitFile()">Submit</button>
        </div>
    </div>
    
    

    <script>
        var fileList = new Vue({

            data(){
                return {
                    file: ''
                }
            },
            el: "#file-upload-list",
            methods: {
            /*
                Submits the file to the server
            */
            submitFile(){
                /*
                        Initialize the form data
                    */
                    let formData = new FormData();

                    /*
                        Add the form data we need to submit
                    */
                    formData.append('file', this.file);
                    console.log(this.file);
                    var baseURL="http://127.0.0.1:8000"

                /*
                Make the request to the POST /single-file URL
                */
                    axios.post( baseURL '/uploadfiles',
                        // formData,
                        {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        file:this.file
                       
                    }
                    ).then(function(){
                console.log('SUCCESS!!');
                })
                .catch(function(){
                console.log('FAILURE!!');
                });

                console.log(formData);
            },

            /*
                Handles a change on the file upload
            */
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
            }
            }
            
        });
    </script>

</body>
</html>

Код FastAPI

 
@app.post("/uploadfiles/")
async def create_upload_files(files: List[UploadFile] = File(...)):
    result=""
    for file in files:
        fpath = os.path.join(
            STORAGE_PATH, f'{file.filename}'
        )
        async with aiofiles.open(fpath, 'wb') as f:
            content = await file.read()
            await f.write(content)

        

    return {"message": "success"}

Я пытаюсь загрузить PDF-файл из vuejs в fastAPI. где файл pdf будет сохранен в определенном месте в упомянутом коде fastAPI. Я протестировал код fastapi в postman, и он работает хорошо, и я также включил перекрестное происхождение. Я новичок в vuejs и не знаю, как реализовать функциональность действия формы. В основном мне нужно знать, что транзакция HTTPFile происходит в vuejs

Ошибка- Вывод

Комментарии:

1. Чтобы загрузить файл с помощью Axios, вы используете axios.post(`${baseURL}/uploadfiles`, formData) . Вот и все, никаких дополнительных заголовков не требуется

2. @Phil благодарит, что это помогло мне. На самом деле я нашел проблему. Это простая ошибка, которую я сделал FormData.append(‘files’, this.file); Вместо файлов я поместил файл

3. Привет @KarthickAravindan! Не могли бы вы опубликовать все решение или отредактировать свой вопрос? У меня такая же проблема. Спасибо!

4. Проверьте эту ссылку для полного прохождения serversideup.net/uploading-files-vuejs-axios