Vue3如何获取上传图片文件并随文本提交到POST接口

你遇到的报错和文件上传失败由几个问题共同导致：

• 直接原因：模板中给文件input加了ref="file"，但<script setup>内没有声明同名的file响应式变量，访问file.value自然会抛出ReferenceError。
• 事件绑定错误：v-on:change="onImageUpload(e)"写法无法拿到正确的原生事件对象，且函数本身也没有定义入参接收事件。
• 取值逻辑错误：注释中form.value.file = form.value.file[0]逻辑不成立，此时form.value.file初始值为null，不存在下标为0的元素。
• 提交格式错误：携带文件的POST请求不能使用普通JSON格式传参，必须用FormData对象包装字段，否则后端无法解析到上传的文件。

不需要额外给input加ref，直接通过change事件的事件对象就能拿到选中的文件，步骤如下：

1. 修正模板中的事件绑定，去掉手动传参，直接绑定方法名，Vue会自动将原生事件对象作为参数传入函数
2. 在事件处理函数中通过e.target.files[0]拿到单文件上传场景下用户选中的文件，赋值给form.value.file
3. 提交时新建FormData实例，依次追加文本字段和文件字段，不要手动设置Content-Type请求头，浏览器会自动生成带分隔符的multipart/form-data头，手动设置反而会导致解析失败。

模板部分 #

<label for="comment" class="sr-only">Write what's on your mind</label>
<textarea
    v-model="form.post"
    rows="3"
    name="comment"
></textarea>
<label>
  <!-- 加accept限制只选图片文件，直接绑定方法名即可 -->
  <input type="file" accept="image/*" @change="onImageUpload" />
</label>
<button @click="submitPost">发布博客</button>

script setup部分 #

<script setup>
import { ref } from "vue";

const form = ref({
  post: null,
  file: null
});

function onImageUpload(e) {
  const selectedFile = e.target.files[0];
  // 处理用户取消选择的场景
  if (!selectedFile) {
    form.value.file = null;
    return;
  }
  form.value.file = selectedFile;
  console.log("已选中文件：", form.value.file);
}

async function submitPost() {
  // 校验必填的文本字段
  if (!form.value.post?.trim()) {
    alert("请输入博客内容");
    return;
  }

  const payload = new FormData();
  payload.append("comment", form.value.post);
  // 图片是可选字段，只有选中时才追加
  if (form.value.file) {
    payload.append("image", form.value.file);
  }

  // 发送请求示例，用axios写法同理，直接传FormData作为data即可
  const res = await fetch("/api/posts", {
    method: "POST",
    body: payload
  });
  // 后续响应处理逻辑
}
</script>

如果你确实想通过ref的方式获取input元素，只需要在script中额外声明const file = ref(null)即可，取值时通过file.value.files[0]拿文件，这种方式和事件对象取法效果一致，但需要多维护一个ref变量，单文件上传场景下用事件对象更简便。

内容的提问来源于stack exchange，提问作者Mena