时间戳

首页 > 解决方案 > 在上传图像过程中向服务器发送附加信息

vue.js - 在上传图像过程中向服务器发送附加信息

问题描述

我在 vue 2.6.11 上使用 filepond 4.25.1，到目前为止一切正常。我想向我的服务器（即 aspnet core 3）发送附加信息。我从 filepond 发送我的请求，如下所示

myServer: {
        url: "http://**********/api/CustomerAuth/",
        process: {
          url: "uploadimages",
          method: "POST",
          withCredentials: false,
          headers: {},
          data: {
            nationalcode: "1234567890",
            typecode:"1"
          },
          timeout: 7000,
        },
        load: (source, load) => {
          fetch(source)
            .then((res) => res.blob())
            .then(load);
        },
      }

和服务器端

[HttpPost("uploadimages")]
    public IActionResult UploadImages()
    {
        try
        {
            var file = Request.Form.Files[0];
            string folderName = "Upload";
            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 fullPath = Path.Combine(newPath, fileName);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
            }
            return Ok("Upload Successful");
        }
        catch (System.Exception ex)
        {
            return NotFound(new { img_upld_error = ex.Message });
        }
    }

在服务器端，我需要访问作为数据发送的“国家代码”和“类型代码”，这两个参数的值总是改变，因此它不是静态值，并且这两个参数的用户值的交互总是改变。

如果有人给我一些线索或指导我解决我的问题，我真的很感激。

标签： vue.jsasp.net-corefilepond

解决方案

FilePond 开发人员在这里。

data不作为道具存在process。

ondata您可以使用该属性添加其他 FormData 参数。请参阅下面的更新示例：

myServer: {
        url: "http://**********/api/CustomerAuth/",
        process: {
          url: "uploadimages",
          method: "POST",
          withCredentials: false,
          headers: {},
          data: {
            nationalcode: "1234567890",
            typecode:"1"
          },
          ondata: (formData) => {
              formData.append('nationalcode', '1234567890'); 
              formData.append('typecode', '1'); 
              return formData;
          }
          timeout: 7000,
        },
        load: (source, load) => {
          fetch(source)
            .then((res) => res.blob())
            .then(load);
        },
      }

或者，您可以使用 filepond 元数据插件将元数据添加到每个文件（这会自动发送到服务器）。 https://pqina.nl/filepond/docs/patterns/plugins/file-metadata/

FilePond.setOptions({
    fileMetadataObject: {
        'nationalcode': '1234567890',
        'typecode': '1'
    }
})

推荐阅读