uniapp弹窗表单上传图片和数据

你可以使用uniapp的官方组件`uni-popup`来实现弹窗，同时使用`uni-form`组件来实现表单。上传图片可以使用`uni.chooseImage`方法来选择图片并上传到服务器，上传数据可以使用`uni.request`方法发送数据到服务器。

以下是一个简单的示例代码：

<template>
  <view>
    <button @click="showPopup">打开弹窗</button>
    <uni-popup v-model="show" position="bottom">
      <uni-form>
        <uni-form-item label="标题">
          <uni-input v-model="title"></uni-input>
        </uni-form-item>
        <uni-form-item label="内容">
          <uni-input v-model="content"></uni-input>
        </uni-form-item>
        <uni-form-item label="上传图片">
          <button @click="chooseImage">选择图片</button>
        </uni-form-item>
        <uni-form-item>
          <button @click="submit">提交</button>
        </uni-form-item>
      </uni-form>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: '',
      content: '',
      images: []
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.images = res.tempFilePaths
        }
      })
    },
    submit() {
      uni.request({
        url: 'your_url',
        method: 'POST',
        data: {
          title: this.title,
          content: this.content,
          images: this.images
        },
        success: (res) => {
          console.log(res)
        }
      })
    }
  }
}
</script>

在这个示例中，`uni-popup`组件作为一个弹窗容器，包含一个`uni-form`表单，表单中包含了标题、内容、上传图片和提交按钮。当点击选择图片按钮时，调用`uni.chooseImage`方法选择图片并将选择的图片路径存储在`images`数组中。当点击提交按钮时，调用`uni.request`方法将表单数据和图片上传到服务器。你需要将`your_url`替换成你的服务器地址。