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

Question

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

请帮我！

我的部分代码如下所示：

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 打印屏幕

html页面打印屏幕

Answer 1

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

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

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

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