如何将上传的文件添加到 Vue 中已上传文件的列表中？

Question

我目前有一个接受单个 CSV 文件的文件上传器。然后使用 axios 我将此类文件发布到服务器，一切正常。我无法实现的是能够上传另一个 CSV，该 CSV 将被添加到上传的 CSV 列表中。我不是在谈论一次上传各种文件，而是在不同的时间点上传不同的文件。

这是用于在 .vue 文件中选择 CSV 文件的方法。

 staticCampaignCSVSelected: function (file) {
  console.log('campaign-detail.vue#staticCampaignCSVSelected', file)
  let vc = this
  vc.selectedHeuristicId = -1
  Campaign.uploadStaticCSV(vc.campaign, file[0])
  .then(
    function (data) {
      alert('CSV cargado con exito')
    }
  )
  .catch(
    function (err, data) {
      console.log("campaign-detail#staticCampaignCSVSelected - catch", err.response)
      alert(err.response.data.error)
    }
  )
},

这是我在其他一些 JS 文件中发布到 API 的函数：

function uploadStaticCSV (campaign, csv) {
  console.log('Campaign#uploadStaticCSV', campaign, csv)


  //long list of assertions

  let formData = new FormData()
  formData.append('csv', csv)

  return axios.post(API.campaignUploadStaticCSV(campaign.id), formData)
}

这是我在 endpoints.js 文件中的功能：

campaignUploadStaticCSV: function (id) { return this.campaign(id) + '' + '/csv' },

我还没有找到将[file] 数组作为参数正确传递给函数的方法，我认为这是我需要以某种方式做的。

任何帮助将不胜感激:)

Answer 1

据我了解您的问题，您需要一种将文件从浏览器界面传递到您的 staticCampaignCSVSelected(file) 方法的方法。如果是这样，为什么不使用输入模型或简单事件或观察者。例如

<input type="file" @input="staticCampaignCSVSelected($event.target.files[0])" />

但我也看到您的代码中有错误。您应该将 .then().catch() 回调附加到 axios.post() 本身，而不是附加到 Campaign.uploadStaticCSV() 方法。

还有

return axios.post()

不会返回服务器响应。您必须在

中处理它

axios.post().then(response => {})

回调