uniapp表单提交数据和图片

在uniapp中，你可以使用form组件来提交表单数据，同时可以使用uni.uploadFile来上传图片。

下面是一个示例：

1. 在template中添加表单和图片上传组件：

<template>
  <view>
    <form @submit="submitForm">
      <input type="text" name="name" placeholder="请输入姓名" />
      <input type="text" name="age" placeholder="请输入年龄" />
      <input type="file" name="file" @change="chooseImage" />
      <button type="submit">提交</button>
    </form>
  </view>
</template>

2. 在script中添加方法：

<script>
export default {
  data() {
    return {
      image: null
    }
  },
  methods: {
    chooseImage(e) {
      // 选择图片并显示预览
      this.image = e.target.files[0]
    },
    submitForm(e) {
      e.preventDefault()
      uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: this.image.tempFilePath,
        name: 'image',
        formData: e.detail.value,
        success: (res) => {
          console.log('上传成功', res)
        },
        fail: (err) => {
          console.log('上传失败', err)
        }
      })
    }
  }
}
</script>

这样就可以实现同时提交表单数据和图片上传了。注意，需要将formData设置为e.detail.value，这样可以获取表单的数据。同时，在uni.uploadFile中，需要设置filePath为图片的临时路径，name为上传的字段名（这里为image）。