Question

我正在尝试获取文件内容并将其插入特定的FileViewModel。原因是我需要发送包含MainViewModel的所有文件，其中包含从客户端（角度）到服务器（.Net WebApi）的FileViewModel列表

任何想法如何实现？

客户端ViewModels：

exprot class MainRequestViewModel{
  public FirstName: string;
  public LastName: string;
  public Comments: string;
  public FilesToUpload: Array<FileItemRequestViewModel>;
}

export class FileItemRequestViewModel{
  public FileContent: ArrayBuffer = null;
  public FileMimeType: string;
  public FileName: string;
  public NumberOfPagesInFile: number;
  public ItemPriority: number;
}

Answer 1

我有2条建议：

1）较小的文件，如图像，附件。你可以通过网络发送base64encoded，注意发送到webapi的有效负载限制（在web.config中定义）

您实体中的

定义属性

fileAsBase64: string

然后，您可以将文件从dropzone组件转换为base64字符串

getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
});

在C＃端，您也可以将文件定义为字符串，并使用它将字符串转换回字节数组

 public class UploadedFileDto
    {
        public string Name { get; set; }
        public string FileAsBase64 { get; set; }

        [JsonIgnore]
        public string MimeType => Regex.Match(FileAsBase64, @"data:(?<type>.+?);base64,(?<data>.+)").Groups["type"].Value;

        [JsonIgnore]
        public byte[] Bytes =>
            Convert.FromBase64String(Regex.Match(FileAsBase64, @"data:(?<type>.+?);base64,(?<data>.+)").Groups["data"].Value);

    }

2：处理较大的文件时

将文件单独调用发送到服务器并临时保存。在这种情况下，您还需要一个函数来清理这些临时文件，这里是一个控制器代码段，带有大小检查并且只允许pdf

public async Task<HttpResponseMessage> Upload()
    {


        Dictionary<string, object> dict = new Dictionary<string, object>();
        try
        {

            var httpRequest = HttpContext.Current.Request;

            foreach (string file in httpRequest.Files)
            {

                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created);

                var postedFile = httpRequest.Files[file];


                if (postedFile != null && postedFile.ContentLength > 0)
                {
                    int MaxContentLength = 1024 * 1024 * 50; //Size = 50 MB  

                    IList<string> AllowedFileExtensions = new List<string> { ".pdf" };
                    var ext = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.'));
                    var extension = ext.ToLower();
                    if (!AllowedFileExtensions.Contains(extension))
                    {

                        var message = string.Format("Please upload file of type .pdf");

                        dict.Add("error", message);
                        return await Task.FromResult(Request.CreateResponse(HttpStatusCode.BadRequest, dict));
                    }
                    else if (postedFile.ContentLength > MaxContentLength)
                    {

                        var message = string.Format("Please upload a file upto 50 mb.");

                        dict.Add("error", message);
                        return await Task.FromResult(Request.CreateResponse(HttpStatusCode.BadRequest, dict));
                    }
                    else
                    {
                        _fileService.SaveUploadedFile(postedFile);

                    }
                }

                var message1 = string.Format("File uploaded Successfully.");
                return await Task.FromResult(Request.CreateResponse(HttpStatusCode.OK, message1)); ;
            }
            var res = string.Format("Please upload a pdf.");
            dict.Add("error", res);
            return Request.CreateResponse(HttpStatusCode.BadRequest, dict);
        }
        catch (Exception ex)
        {
            Log.Error(ex);
            var res = string.Format("Errors occured");
            dict.Add("error", res);
            return await Task.FromResult(Request.CreateResponse(HttpStatusCode.InternalServerError, dict));
        }
    }

如何使用DropzoneJS将文件插入角度ViewModel

1 个答案: