uniapp上传图片时，提示不是一个有效的Blob类型，如何转成有效的blod类型

以下是uniapp上传图片临时文件转成Blob的方法： ```javascript // 引入toBlob插件 import toBlob from 'toblob' // 将图片转为base64 let base64 = 'data:image/png;base64,iVBORw0KG...' // 将base64转为Blob toBlob.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => { // res即为转换后的Blob对象 console.log(res) }) ```

### UniApp 中使用 Blob 对象实现文件上传 在 UniApp 开发环境中，为了处理和上传 Blob 类型的数据，可以采用多种方法来确保数据能够被正确解析和服务端接收。下面提供了一个完整的解决方案，涵盖了从获取图片资源到最终完成上传的过程。 #### 获取并转换图片为 Blob 数据 对于前端部分，当用户选择了一张或多张图片之后，可以通过 JavaScript 的 `URL.createObjectURL()` 方法创建一个指向该图片的临时 URL，并利用此 URL 来生成对应的 Blob 对象。如果原始图像是 Base64 编码字符串，则应先将其解码再转化为 Blob 形式以便后续操作[^2]。 ```javascript function base64ToBlob(b64Data, contentType) { const sliceSize = 512; b64Data = b64Data.replace(/^[^,]+/, ''); b64Data = b64Data.replace(/\s/g, ''); let byteCharacters = atob(b64Data); let byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { let slice = byteCharacters.slice(offset, offset + sliceSize); let byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } let byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } return new Blob(byteArrays, { type: contentType }); } ``` #### 准备上传接口调用参数 一旦拥有了有效的 Blob 实例，就可以准备发起上传请求所需的各项配置项了。这里需要注意设置好 MIME 类型以及模拟表单字段名称等细节，以满足服务器端对接口的要求[^1]。 ```javascript async function prepareUpload(blobInstance) { var formData = new FormData(); formData.append('file', blobInstance); // 假设服务端期望接收到名为 'file' 的键值对 try { await uni.uploadFile({ url: '/your/upload/api/endpoint', filePath: URL.createObjectURL(blobInstance), name: 'file', header: {'content-type': 'multipart/form-data'}, formData, success(uploadRes){ console.log(`Upload succeeded with response ${uploadRes.data}`); }, fail(err){ console.error(`Failed to upload file due to error:`, err); } }) } catch(error){ console.error("Error occurred during preparation:", error); } } ``` #### 页面组件集成与事件绑定 最后一步是在页面上添加用于触发上述逻辑的功能按钮或其他交互控件。这通常涉及到监听用户的输入行为（比如点击），并通过相应的回调函数执行具体的业务流程。此处给出的例子采用了 uView UI 库中的 `<u-upload>` 组件作为演示[^4]： ```html <u-upload id="selectPhoto" :style="{display: selectPhotoDisplay}" :useBeforeRead="true" @afterRead="handleAfterRead" @delete="handleDeletePic" name="photo" multiple accept="image/*" uploadText="选择照片" > </u-upload> <script> export default { methods:{ handleAfterRead(event){ event.file.forEach(file => { this.convertAndUpload(file.content); }); }, convertAndUpload(base64String){ let blob = base64ToBlob(base64String,'image/jpeg'); prepareUpload(blob).then(/* ... */); } /* Other handlers */ } }; </script> ```