使用“canvas.toblob()!”后文件名更改！答案

【问题标题】：Filename change after using "canvas.toblob()!"使用“canvas.toblob()!”后文件名更改！
【发布时间】：2018-05-15 04:01:57
【问题描述】：

我正在使用Cropper.js 将裁剪后的图像发送到服务器，但是当我使用“convtoblob(blob)”并将 blob 附加到 formfile 然后将其发送到 Web API 时，原始图像文件名丢失并根据附加图像更改到“斑点”！

请帮帮我！

我的部分代码如下所示：

canvas.toBlob(function(blobs) {
  //blobs.nam = FN;
  var formData = new FormData();
  formData.append("up", blobs);
  $.ajax('http://localhost:51320/api/fileupload/uploadfile', {
    method: 'POST',
    processData: false,
    contentType: false,
    data: formData,
    cache: false,

    success: function(d) {
      var d;
      $alert.show().addClass('alert-success').text('Upload success');
    },

    error: function(d) {
      var d;
      avatar.src = initialAvatarURL;
      $alert.show().addClass('alert-warning').text('Upload error');
    },

    complete: function(d) {
      var d;
      $progress.hide();
    }
  });
});

即使我添加了一个新属性，如您所见“//blob.nam = FN;”我没有在 webAPI 中得到它。我也有 canvas-toBlob.js 但有任何变化！

请帮帮我！

web api print screen

html page print screen

【问题讨论】：

标签： javascript jquery asp.net cropperjs

【解决方案1】：

您可以像这样附加表单数据

formData.append('up', blobs, "blobs.jpg");

第三个参数是你的文件名。如果你想得到你的旧文件名，请像这样读取你的input type="file"值 var yourFileName = $("#ImageFile").val().split('\\').pop(); 并将附加代码更改为 formData.append('up', blobs, yourFileName );

它已经过测试并且工作正常。

【讨论】：