当我使用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);
    }
}

注意：\u post2（）是一个使用XMLHttpRequest进行上传工作的函数。

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

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

以下是上传数据的详细信息：

请求有效载荷

------WebKitFormBoundaryW0NQVOkdrfkYGWV3
内容配置：表单数据；name=“%%File.48257279001171c9.2C36671DA7F1B6C9482575DE002E1F1F14.$Body.0.3D8”；filename=“blob”

内容类型：图片/png

------WebKitFormBoundaryW0NQVOkdrfkYGWV3--

Answer 1

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

blob.name = "imageFilename.png"

在那之后，你的JS函数应该能够拾取它。我使用jQuery文件上传，这个可以用它。

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

根据FormData，您应该能够向数据中添加文件名参数。append（）调用如下：

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