CODEWITHSUNDEEP
pythonnode.jsvue.jsflaskaxios
dimwit
dimwit

Reputation: 1

flask handle request but get none

I want to use FormData to carry pictures as file,and transform it to flask by axios.

<el-upload
               action=""
               ref="pictures"
               list-type="picture-card"
               :on-preview="handlePictureCardPreview"
               :on-change="handlechange"
               :on-remove="handleRemove"
               :http-request="importFile"
               :file-list="fileList"
               id="upload1"
                multiple
                >
    <el-icon><Plus /></el-icon>
  </el-upload>
<el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
        </el-main>
        <el-footer>
          <el-button style="display:block;margin:0 auto" @click="submitUpload" type="primary"> 确认</el-button>
        </el-footer>

<script lang="ts" >
import {Location, Setting,Plus} from '@element-plus/icons-vue';
import {reactive ,ref} from 'vue';
import type{UploadProps, UploadUserFile} from 'element-plus'
import axios from 'axios';

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
var myList:any[]=[]
var formData:any=null
export default {
  components: {
    Location, Setting
  },
  data(){
    return {
      myList:[],
      updata:{},
      fileList: [],
      formData: null,
      dialogImageUrl,
      dialogVisible,
    }
  },
  methods:{
handlechange(file:any,fileList:any){
      myList = fileList
    },
    importFile(){
      formData=new FormData()
       myList.forEach(item=>{formData.append('file',item.raw,item.raw.name)
       })
    },
    handleRemove(file:any,fileList:any){
      myList=fileList
    },
    handlePictureCardPreview(file:any){
      dialogImageUrl.value = file.url;
      dialogVisible.value = true;
      // console.log(dialogImageUrl.value);
    },
submitUpload(){//点击按钮提交fileList中的文件
      console.log("submitUpload")
       let config = {
        headers: { "Content-Type": "multipart/form-data" },
      }
     
      console.log(formData.get('file'))
      axios.post("http://localhost:5000/picturesUpload",formData, config)
     },
}

but flask just get none request,when I use print(request.files) or print(request.form) it's ImmutableMultiDict([]). while checking chrome i get this,so is the formdata transformed correctly?:

------WebKitFormBoundary5PSAO7r32arNACHu
Content-Disposition: form-data; name="file"; filename="xx.png"
Content-Type: image/png


------WebKitFormBoundary5PSAO7r32arNACHu

that is so confusing.how could I handle it?

Upvotes: 0

Views: 100

Answers (1)

Detlef
Detlef

Reputation: 8592

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

Upvotes: 0

Related Questions