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

Posted 2023-02-27

【中文标题】当我使用 html5 将数据上传到服务器时，我可以在 blob 数据中设置文件名吗？

【英文标题】：Can I set file name in blob data when I upload data to server using html5?

【发布时间】：2014-01-13 18:10:14

【问题描述】：

我使用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";文件名=“blob”

内容类型：图片/png

------WebKitFormBoundaryW0NQVOkdrfkYGWV3--

【参考方案1】：

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

【讨论】：

出色、简单直接的答案。

【参考方案2】：

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

blob.name = "imageFilename.png"

之后，您的 JS 函数应该能够拾取它。我正在使用 jQuery File Upload，这适用于它。

【讨论】：

blob.name = "imageFileName.png" 和 blob.filename = "imageFileName.png" 对我不起作用。

相同。 @NewfrontSolutions 请问您找到解决方案了吗？

是的，我赞成其他对我有用的答案之一。 data.append("ImageFileField", blob, "imageFilename.png");对我有用。

@NewfrontSolutions 它说它只在 FF 和 Chrome 中工作，......它支持你的所有客户吗？ --- 重新查了官网，好像没问题---- developer.mozilla.org/en-US/docs/Web/API/FormData/append

【参考方案3】：

根据FormData，您应该可以在data.append() 调用中添加文件名参数，如下所示：

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