[Vuejs]-Flask handle request but get none

by

0👍

I know this issue from a previous version of axios.
Using version 0.27.2 and the following code was the solution for me.

I hope it helps. Unfortunately I can’t tell you more about it.

<template>
  <el-upload
    action=""
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :file-list="fileList"
    :auto-upload="false"
    multiple
   >
     <el-icon><Plus /></el-icon>
   </el-upload>

   <el-dialog v-model="dialogVisible">
     <img w-full :src="dialogImageUrl" alt="Preview Image" />
   </el-dialog>

   <el-button style="display:block;margin:0 auto" @click="submitUpload" type="primary">Submit</el-button>
</template>

<script lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

import axios from 'axios';

export default {
  setup() {
    const dialogImageUrl = ref('');
    const dialogVisible = ref(false);
    const fileList = ref<UploadUserFile[]>([]);

    return {
      dialogVisible,
      dialogImageUrl,
      fileList
    };
  },
  components: {
    Plus
  },
  methods: {
    handlePictureCardPreview(uploadFile:any) {
      this.dialogImageUrl = uploadFile.url!;
      this.dialogVisible = true;
    },
    submitUpload() {
      const formData = new FormData();
      this.fileList.forEach(item => {
        formData.append('file[]', item.raw, item.raw.name);
      });
      axios.post('http://localhost:5000/upload', formData)
        .then(() => {
          this.fileList.splice(0, this.fileList.length);
        });
    }
  }
}
</script>

from flask import (
    Flask,
    request
)
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.post('/upload')
def upload():
    uploaded_files = request.files.getlist('file[]')
    print(uploaded_files)
    return '', 200

Leave a comment