如何将上传图片到Node服务的Dart函数转换为Vue.js axios.post实现

原Dart代码的核心是构造multipart/form-data格式的POST请求，将选中的图片以img为字段名上传到指定服务端地址，Vue中通过FormData对象配合axios即可实现相同能力，具体实现如下：

步骤1：获取选中的文件对象 #

通常从文件选择控件的change事件中获取文件：

<template>
  <input type="file" accept="image/*" @change="handleFileChange" />
  <button @click="uploadImage">上传图片</button>
</template>

步骤2：编写上传逻辑 #

<script>
import axios from 'axios'

export default {
  data() {
    return {
      selectedFile: null,
      // 替换为你的服务端上传地址
      uploadUrl: '你的服务端接口地址'
    }
  },
  methods: {
    handleFileChange(e) {
      // 获取用户选中的第一个图片文件，对应原Dart中的file对象
      this.selectedFile = e.target.files[0]
    },
    async uploadImage() {
      if (!this.selectedFile) {
        alert('请先选择图片')
        return
      }
      // 构造FormData对象，作用等价于原Dart的MultipartRequest
      const formData = new FormData()
      // 添加文件字段，字段名img，对应原Dart的MultipartFile构造
      // 三个参数分别为：字段名、文件对象、文件名
      formData.append('img', this.selectedFile, this.selectedFile.name)

      try {
        // 发送post请求，axios会自动设置multipart/form-data请求头
        const response = await axios.post(this.uploadUrl, formData, {
          // 可选：添加上传进度监听
          onUploadProgress: (progressEvent) => {
            const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            console.log(`上传进度：${percent}%`)
          }
        })
        // 处理上传成功的响应
        console.log('上传成功', response.data)
      } catch (error) {
        // 处理上传失败
        console.error('上传失败', error)
      }
    }
  }
}
</script>

注意事项 #

• 不需要手动设置Content-Type: multipart/form-data请求头，axios会自动根据FormData对象生成带正确分隔符的请求头
• 服务端的接收逻辑和原Dart上传的接收逻辑完全兼容，不需要做额外修改

内容的提问来源于stack exchange，提问作者Isuru devinda de silva