Vue+Plumber架构下，如何解析前端表单文本至R后端？

我正在构建一个以R（Plumber库）为后端的Vue应用，表单数据能成功传到R，但无法解析其中的文本参数（如graphType、customText等）。以下是相关代码：

当前R代码（CORS过滤器） #

#* @filter cors
function(req, res) {
  res$setHeader("Access-Control-Allow-Origin", "*")
  plumber::forward()
  print(req$postBody)
}

print(req$postBody)的输出显示所有数据已传递：

"------WebKitFormBoundaryAuwYTPBpNXvAQ125\nContent-Disposition: form-data; name=\"file\"; filename=\"test.csv\"\nContent-Type: text/csv\n\nx,y\n1,10\n2,3\n3,5\n4,7\n5,9\n6,5\n------WebKitFormBoundaryAuwYTPBpNXvAQ125\nContent-Disposition: form-data; name=\"graphType\"\n\nscatter\n------WebKitFormBoundaryAuwYTPBpNXvAQ125\nContent-Disposition: form-data; name=\"xAxis\"\n\nx\n------WebKitFormBoundaryAuwYTPBpNXvAQ125\nContent-Disposition: form-data; name=\"yAxis\"\n\ny\n------WebKitFormBoundaryAuwYTPBpNXvAQ125\nContent-Disposition: form-data; name=\"customText\"\n\nhi it's Priya\n------WebKitFormBoundaryAuwYTPBpNXvAQ125--"

我尝试用以下接口定义解析参数，但无法正确获取文本字符串：

#* @post /api/generate-graph
#* @param file:file
#* @param graphType:string
#* @param xAxis:string
#* @param yAxis:string
#* @param customText:string

Vue前端提交代码 #

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const file = ref(null)
const graphType = ref('scatter')
const xAxis = ref('')
const yAxis = ref('')
const graphData = ref(null)
const loading = ref(false)
const error = ref(null)
const csvPreview = ref(null)
const customText = ref('')
const availableColumns = ref([])

const graphTypes = [
  { value: 'scatter', label: 'Scatter Plot' },
  { value: 'line', label: 'Line Graph' },
  { value: 'bar', label: 'Bar Chart' },
  { value: 'histogram', label: 'Histogram' }
]

const handleFileUpload = async (event) => {
  const uploadedFile = event.target.files[0]
  if (uploadedFile && uploadedFile.type === 'text/csv') {
    file.value = uploadedFile
    // Preview CSV data
    const reader = new FileReader()
    reader.onload = async (e) => {
      const text = e.target.result
      const lines = text.split('\n')
      const headers = lines[0].split(',')
      csvPreview.value = {
        headers,
        firstRow: lines[1].split(',')
      }

      // Get column names from the backend
      const formData = new FormData()
      formData.append('file', uploadedFile)
      formData.append('graphType', graphType.value)
      formData.append('xAxis', '')
      formData.append('yAxis', '')
      formData.append('customText', customText.value)

      try {
        const response = await axios.post('http://localhost:8000/api/generate-graph', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        availableColumns.value = response.data.columns
      } catch (err) {
        console.error('Error getting column names:', err)
        error.value = 'Error getting column names: ' + (err.response?.data || err.message)
      }
    }
    reader.readAsText(uploadedFile)
  } else {
    error.value = 'Please upload a valid CSV file'
  }
}

const generateGraph = async () => {
  if (!file.value) {
    error.value = 'Please upload a CSV file first'
    return
  }

  if (!xAxis.value || !yAxis.value) {
    error.value = 'Please specify both X and Y axis columns'
    return
  }

  loading.value = true
  error.value = null

  const formData = new FormData()
  formData.append('file', file.value)
  formData.append('graphType', graphType.value)
  formData.append('xAxis', xAxis.value)
  formData.append('yAxis', yAxis.value)
  formData.append('customText', customText.value)

  // Debug logging
  console.log('Form data being sent:')
  for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1])
  }
  console.log('xAxis:', xAxis.value)
  console.log('yAxis:', yAxis.value)
  console.log('graphType:', graphType.value)
  console.log('customText:', customText.value)

  try {
    const response = await axios.post('http://localhost:8000/api/generate-graph', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    graphData.value = response.data
  } catch (err) {
    console.error('Error details:', err)
    error.value = 'Error generating graph: ' + (err.response?.data || err.message)
  } finally {
    loading.value = false
  }
}

const downloadGraph = async (format) => {
  if (!graphData.value) return

  try {
    const response = await axios.get(`http://localhost:8000/api/download`, {
      params: {
        format,
        path: graphData.value[`${format}_path`]
      },
      responseType: 'blob'
    })

    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `graph.${format}`)
    document.body.appendChild(link)
    link.click()
    link.remove()
  } catch (err) {
    error.value = 'Error downloading graph: ' + err.message
  }
}

</script>

解决方案 #

1. 移除前端手动设置的Content-Type #

当使用FormData时，Axios会自动生成包含boundary的正确Content-Type（比如multipart/form-data; boundary=----WebKitFormBoundaryxxx）。手动设置Content-Type: multipart/form-data会丢失boundary信息，导致Plumber无法拆分各个表单字段。

修改前端的Axios请求，删除headers配置：

// 错误写法
const response = await axios.post(url, formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
})

// 正确写法
const response = await axios.post(url, formData)

2. 完善Plumber接口函数 #

仅添加@param注解不够，需要在函数中明确声明并接收所有参数，Plumber才能正确绑定解析后的值：

#* @post /api/generate-graph
#* @param file:file
#* @param graphType:string
#* @param xAxis:string
#* @param yAxis:string
#* @param customText:string
function(file, graphType, xAxis, yAxis, customText) {
  # 验证参数是否正确获取
  cat("graphType:", graphType, "\n")
  cat("customText:", customText, "\n")
  
  # 处理上传的CSV文件
  df <- read.csv(file$tempfile)
  
  # 返回列名等数据给前端
  list(columns = colnames(df))
}

3. 检查Plumber版本 #

确保使用的Plumber版本≥1.0.0，旧版本对multipart/form-data的解析支持不完善，可以通过以下命令升级：

install.packages("plumber")

验证 #

修改后重新启动Plumber服务和Vue应用，提交表单后，接口函数中的cat语句会打印出正确的文本参数值，说明解析成功。

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