前端uview上传图片拿取二进制流

### 使用 uView 在前端上传图片并获取二进制数据流 #### 依赖库安装 为了简化操作，可以使用 `uView` 组件库中的 `<u-upload>` 组件来完成文件的选择与上传工作。确保项目已经引入了 `uView` 并配置好。 #### HTML 结构定义 创建一个简单的表单用于触发文件选择器： ```html <u-button type="primary" @click="chooseImage">选择图片</u-button> <u-image width="200rpx" height="200rpx" :src="imageSrc"></u-image> ``` #### JavaScript 方法编写 在 Vue 的 methods 中添加方法以处理图像选取事件以及读取文件内容为二进制字符串： ```javascript export default { data() { return { imageSrc: '' } }, methods: { chooseImage() { uni.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success(res) { const tempFilePaths = res.tempFilePaths; // 将选中的图片显示出来 this.imageSrc = tempFilePaths[0]; // 创建 FileReader 对象用来读取文件 let reader = new FileReader(); reader.readAsArrayBuffer(tempFilePaths[0]); // 当读取完成后执行回调函数 reader.onloadend = function(e){ console.log('成功获取到的二进制数据:', e.target.result); // 此处可将 binaryData 发送给服务器或其他逻辑处理... var binaryData = e.target.result; // 进一步的操作比如发送给后端API接口等 }.bind(this); // 错误处理 reader.onerror = (error)=>{ console.error('读取出错：', error); }; }.bind(this), fail(err) { console.log('失败信息：' + JSON.stringify(err)); } }); } } } ``` 上述代码实现了通过调用微信小程序 API `uni.chooseImage()` 来打开本地照片库或启动摄像头拍摄新照片的功能，并且当用户选择了某个图片之后会尝试将其转化为 ArrayBuffer 形式的二进制数据[^1]。 需要注意的是，在实际开发过程中可能还需要考虑跨浏览器兼容性等问题；另外如果目标平台不是基于 WeChat Mini Program，则应替换相应的文件选择方式。