Vuejs загружает несколько файлов, загружая только один файл за раз

Question

Ребята, я работаю над приложением VueJS и использую net core в качестве бэкэнда,

У меня есть компонент с функцией загрузки, которая работает, но не так, как ожидалось, например, если явыбрал для загрузки 3 файлов, он будет загружать только первый из 3.

Мой HTML

<div class="container">
        <div class="large-12 medium-12 small-12 cell">
          <label>
            Files
            <input type="file" name="file" ref="files" multiple v-on:change="fileChange($event.target.files)" />
          </label>
          <v-btn outline color="primary" dark v-on:click="upload()">Submit</v-btn>
        </div>
      </div>

Часть моего сценария

  export default {
    name: 'Profile',
    data() {
      return {
        records: [],
        application: [],
        profile: [],
        history: [],
        userValues: [],
        dialog: false,
        notifications: false,
        sound: true,
        widgets: false,
        files: new FormData()        
      };
    },
    methods: {
      fileChange(fileList) {
        this.files.append("file", fileList[0], fileList[0].name);
      },
      upload() {
        axios({ method: "POST", "url": "/api/upload", "data": this.files }).then(result => {
          console.dir(result.data);
        }, error => {
          console.error(error);
        });
      }

И мой контроллер

 [Produces("application/json")]
[Route("api/[controller]")]
public class UploadController : Controller
{
    private IHostingEnvironment _hostingEnvironment;

    public UploadController(IHostingEnvironment hostingEnvironment)
    {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost, DisableRequestSizeLimit]
    public ActionResult UploadFile()
    {
        var email = "test@email.com";
        try
        {

            var file = Request.Form.Files[0];
            string folderName = "BasteDocuments";
            string webRootPath = _hostingEnvironment.WebRootPath;
            string newPath = Path.Combine(webRootPath, folderName);
            if (!Directory.Exists(newPath))
            {
                Directory.CreateDirectory(newPath);
            }
            if (file.Length > 0)
            {
                string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                string newname = email + "_" + fileName;
                string fullPath = Path.Combine(newPath, newname);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
            }
            return Json("Upload Successful.");
        }
        catch (System.Exception ex)
        {
            return Json("Upload Failed: " + ex.Message);
        }
    }
}

Также вместе с файлами я хотел бы передать в качестве параметра из моего vue электронную почту: this.profile.email.

Как я уже сказал, это работает, но только один файл ввремя.

Answer 1

var file = Request.Form.Files[0]; Это будет выскакивать только первый файл из вашего запроса.Вместо этого вам нужно проверить

Вместо этого обращайтесь к своим файлам в цикле:

foreach(uploadedFile in Request.Form.Files) {

}