Question

我使用event.clipboardData从剪贴板获取图像，然后上传服务器，代码：

var items = e.clipboardData.items;
for(var i=0;i<items.length;i++)
{
    if(items[i].type.indexOf("image")!=-1)
    {
        var blob=items[i].getAsFile();
        var data = new FormData();
        data.append("ImageFileField",blob);
        _post2("url...",data);
    }
}

注意：_post2()是使用XMLHttpRequest进行上传工作的功能。

以上代码工作正常，剪贴板中的图像可以直接上传到我的服务器。

但我发现问题，上传到服务器的图片文件名固定为“blob”，我可以在上传到服务器之前修改文件名吗？

这是上传数据详情：

请求有效负载

------ WebKitFormBoundaryW0NQVOkdrfkYGWV3
  内容处理：表格数据; NAME = “%% File.48257279001171c9.2c36671da7f1b6c9482575de002e1f14 $ Body.0.3D8。”文件名= “斑点”

内容类型：image / png

------ WebKitFormBoundaryW0NQVOkdrfkYGWV3 -

Answer 1

根据FormData，您应该能够为data.append()电话添加文件名参数，如下所示：

data.append("ImageFileField", blob, "imageFilename.png");

Answer 2

如果你想修改blob本身的文件名，只需添加一个名为“name”的键

blob.name = "imageFilename.png"

之后你的JS函数应该能够找到它。我正在使用jQuery文件上传，这适用于它。

Answer 3

我遇到了同样的问题，即在上传过程中，文件名不是通过blob对象分配给多部分，而是经过大量google和RND之后。我找到了解决此问题的简单最佳方法。

 let file = event.target.files[0];
 this.fileName = file.name;   // Like : abc.jpeg

 this.croppedImage = file  //blob object after cropping
 const formData = new FormData();
 formData.append('file',this.croppedImageSend,this.fileName);
 this.http.post(url, formData, headersOptions)

使用html5将数据上传到服务器时，是否可以在blob数据中设置文件名？

3 个答案: