Blob 特性使用示例

展示 JavaScript 中 Blob 对象的五个主要特性及其实践应用

1. 不可逆性

Blob 创建后内容不可更改，修改需创建新 Blob

结果:


                

            

        


        
        

            

                

                    
                

                
2. 切片功能

            

            
使用 slice() 方法从现有 Blob 创建新 Blob（大文件分片上传场景）

            
            

                

                    
                

                
                
                

                    
分片结果:

                    

                

            

        


        
        

            

                

                    
                

                
3. MIME类型

            

            
type 属性表明数据的 MIME 类型，如图片、文本等

            
            

                

                    
                    
                    
                    
                

                
                

                    
Blob 信息:

                    

                

            

        


        
        

            

                

                    
                

                
4. URL生成

            

            
通过 URL.createObjectURL() 为 Blob 生成临时 URL

            
            

                

                    
                    
                

                
                

                    
图片将显示在这里

                

                
                

                    
提示: 使用 URL.createObjectURL() 后，记得用 URL.revokeObjectURL() 释放资源

                

            

        


        
        

            

                

                    
                

                
5. 文件操作

            

            
File 接口继承自 Blob，可作为文件使用（如表单提交）

            
            

                

                    
                

                
                

                    
模拟表单提交: