如何将上传的文件添加到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' },

我还没有找到一种方法将a[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 => {})

打回来