无法让 Dropzone.js 发送额外的数据

Question

我正在使用 Dropzone.js 和 .net core 3.1。我可以让它调用我的控制器操作，但是我无法让它随请求发送任何其他数据。

这是我的表格：

<form action="/api/photos/"
          class="dropzone needsclick dz-clickable"
          id="image-upload"
          method="post">
        <input type="hidden" name="eventId" value="1"/>
        <div class="dz-message needsclick">
            <span class="note needsclick">
                Drop files here or click to upload.
            </span>
        </div>
    </form>

这是我的 Javascript:

<script>
            Dropzone.options.imageUpload = {
                dictDefaultMessage: "Drop files here or Click to Upload",
                addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
                init: function () {
                myDropzone = this;
                    myDropzone.on("sending", function (file, xhr, data) {
                data.append("message", "hello world");
                        console.log(data);
                    });
                    myDropzone.on("success", function (file, response) {
                console.log("Success");
                        myDropzone.removeFile(file);
                    });
                }
            };
    </script>

这是我的控制器端点

public async Task<IActionResult> PostPhoto(List<IFormFile> file)
        {
            ..code removed..
        }

正如你所看到的，我在表单中有一个隐藏字段，它应该随请求一起发送数据，我也尝试通过 JS 向表单数据附加一个值，但要么不发送或我找不到它。我查看了开发工具的网络面板，可以看到正在发送的图像，但没有别的。或者如果它被发送我如何在控制器中找到它？我在这上面花了好久，有点烦人，请帮忙！

Answer 1

您可以将 eventId 添加到表单操作中的 url 参数，例如 <form action="/api/photos/1"

然后更新您的控制器操作：

    [HttpPost]
    [Route("api/photos/{eventId:int}")]
    public async Task<IActionResult> PostPhoto([FromRoute] int eventId, List<IFormFile> file)
    {
        ..code removed..
    }

另一种使用 sending 事件的解决方案，就像您所做的那样。但是您需要将参数添加到控制器操作中。你在js中追加message，所以你的代码会是这样的：

    public async Task<IActionResult> PostPhoto([FromForm]string message, List<IFormFile> file)
    {
        ..code removed..
    }

无法让 Dropzone.js 发送额外的数据

Cannot get Dropzone.js to send additional data

javascript

asp.net-core

dropzone.js

razor-pages