Question

我正在使用Cropper.js将裁剪的图像发送到服务器，但是当我使用＆＃34; convtoblob（blob）＆＃34;并将blob附加到formfile然后将其发送到Web API，原始图像文件名未命中并根据附加的图像更改为＆＃34; blob＆＃34;！

请帮助我！

我的部分代码如下所示：

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();
    }
  });
});

即使我在你看到的时候添加一个新属性＆＃34; // blobs.nam = FN;＆＃34;我不能在webAPI中获取它。我也有canvas-toBlob.js，但有任何变化！

请帮助我！

web api print screen

html page print screen

Answer 1

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

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

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

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

使用＆＃34; canvas.toblob（）后文件名更改！＆＃34;

1 个答案: