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

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
Content-Disposition:form-data; NAME = "%% File.48257279001171c9.2c36671da7f1b6c9482575de002e1f14 $ Body.0.3D8." filename = "blob"

内容类型:image/png

------ WebKitFormBoundaryW0NQVOkdrfkYGWV3--

Answer 1

根据FormData,您应该能够为您的data.append()调用添加一个filename参数,如下所示:

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

Answer 2

我遇到了同样的问题，在上传过程中，文件名不是分配给带有 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) 

Answer 3

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

blob.name = "imageFilename.png"

之后你的JS函数应该能够获取它.我正在使用jQuery文件上传,这适用于它.