用户点击上传图片按钮，上传图片并且显示在页面中，用户再次点击提交按钮，将上传图片和一个数组到python后端，前端使用vue和element ui，后端使用python以及fastapi以及basemodel，前后端代码如何编写

前端代码：

首先，需要在Vue组件中添加一个上传图片的input标签，并设置type为file。

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadImage" />
    <button @click="submit">提交</button>
    <img :src="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageFile: null,
      imageUrl: ""
    };
  },
  methods: {
    uploadImage() {
      this.imageFile = this.$refs.fileInput.files[0];
      this.imageUrl = URL.createObjectURL(this.imageFile);
    },
    async submit() {
      const formData = new FormData();
      formData.append("image", this.imageFile);
      formData.append("array", JSON.stringify([1, 2, 3]));
      await this.$axios.post("/api/submit", formData);
    }
  }
};
</script>

在上面的代码中，我们通过`<input type="file">`标签来实现上传图片的功能，使用`URL.createObjectURL`方法来预览图片。在提交按钮的click事件中，我们创建一个FormData对象，并且将上传的图片和一个数组添加到FormData中，然后使用axios发送POST请求到后端。

后端代码：

使用FastAPI和Pydantic可以很方便地实现后端的数据校验和类型转换。

首先，我们需要在后端定义一个Pydantic模型来描述请求体的数据结构，例如：

from typing import List
from fastapi import FastAPI, File, UploadFile
from pydantic import BaseModel

app = FastAPI()

class SubmitRequest(BaseModel):
    image: UploadFile
    array: List[int]

在上述代码中，我们定义了一个名为`SubmitRequest`的数据模型，包括`image`和`array`两个字段，分别对应上传的图片和一个整型数组。

然后，在接口中使用该模型来进行数据校验和类型转换，例如：

@app.post("/api/submit")
async def submit(req: SubmitRequest):
    image_bytes = await req.image.read()
    image_array = numpy.array(Image.open(BytesIO(image_bytes)))
    array = req.array
    # do something with image_array and array
    return {"message": "success"}

在上述代码中，我们使用`req.image.read()`方法来读取上传的图片，并使用Pillow库将其转换为numpy数组。然后，我们可以使用`req.array`来获取上传的数组。最后，我们可以在函数中处理这些数据，并返回一个JSON格式的响应。

需要注意的是，在定义`SubmitRequest`模型时，我们使用了`UploadFile`类型来表示上传的文件。在函数中，我们使用`req.image.read()`方法来读取上传的图片的二进制数据。此外，我们使用了Pillow库来处理图片数据，需要先使用`pip install pillow`命令安装该库。

以上就是一个简单的上传图片并提交数据的前后端代码示例。