在 MVC 中使用 FilePond 在文件夹中上传文件？答案

【问题标题】：Upload file inside a folder with FilePond in MVC?在 MVC 中使用 FilePond 在文件夹中上传文件？
【发布时间】：2022-10-14 13:48:02
【问题描述】：

我正在尝试使用 FilePond 将文件上传到我的项目。我想将文件保存在文件中（图像/横幅）。但是当我在输入变量中添加 class="filepond" 时，IFormFile 返回 null。知道如何解决这个问题吗？

@model InputViewModel

<form method="post" asp-controller="Home" asp-action="Create" enctype="multipart/form-data">

    <input type="file"
           class="filepond"
           name="postedFiles"
           multiple
           data-allow-reorder="true"
           data-max-file-size="3MB"
           data-max-files="3">

    <button class="btn btn-primary" type="submit" style="visibility:visible">Save</button>

</form>

控制器

 public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private readonly IWebHostEnvironment _hostEnvironment;
        public HomeController(ILogger<HomeController> logger,IWebHostEnvironment hostEnvironment)
        {
            _logger = logger;
            _hostEnvironment = hostEnvironment;
        }

        public async Task<IActionResult> Create(InputViewModel command)
        {
               
            return View();
        }

        [HttpPost]
        public async Task<IActionResult> Create(InputViewModel command, List<IFormFile> postedFiles)
        {
            string wwwPath = this._hostEnvironment.WebRootPath;
            string contentPath = this._hostEnvironment.ContentRootPath;

            string path = Path.Combine(this._hostEnvironment.WebRootPath, @"images\banner");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            List<string> uploadedFiles = new List<string>();
            foreach (IFormFile postedFile in postedFiles)
            {
                string fileName = Path.GetFileName(postedFile.FileName);
                using (FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
                {
                    postedFile.CopyTo(stream);
                    uploadedFiles.Add(fileName);
                    ViewBag.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
                }
            }
            return View();
        }

【问题讨论】：

你能显示有效载荷和响应吗？

标签： c# asp.net-mvc model-view-controller filepond

【解决方案1】：

下面是一个工作demo，大家可以参考一下。

输入视图模型：

public class InputViewModel
    {
        public List<IFormFile> postedFiles { get; set; }
    }

家庭控制器：

        public async Task<IActionResult> Create(InputViewModel command)
        {

            return View();
        }
        [HttpPost]
        public async Task<IActionResult> Create(InputViewModel command, List<IFormFile> postedFiles)
        {
            ...
            return View();
        }

创建视图：

@model InputViewModel

<form id="uploadform" method="post" enctype="multipart/form-data">
    <input type="file" asp-for="postedFiles" class="filepond" multiple  data-allow-reorder="true"
           data-max-file-size="3MB"
           data-max-files="3"/>
    <span asp-validation-for="postedFiles" />
    <input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    $(document).ready(function(e){
pond = FilePond.create(
    document.querySelector('.filepond'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

$("#uploadform").submit(function (e) {
  e.preventDefault();
  var formdata = new FormData(this);
  // append FilePond files into the form data
  pondFiles = pond.getFiles();
  for (var i = 0; i < pondFiles.length; i++) {
      // append the blob file
      formdata.append('postedFiles', pondFiles[i].file);
  }

  $.ajax({
    url: "/Home/create",
    data: formdata,

    processData: false,
    contentType: false,
    method:"post"

  });

})
});
</script>

结果：

【讨论】：