uni-file-picker图片二进制上传

### 使用 `uni-file-picker` 进行图片的二进制上传

在 UniApp 中，可以利用 `uni-file-picker` 组件选择本地图片并将其转换为二进制数据进行上传。下面展示了一个完整的流程，包括选择文件、读取文件作为二进制字符串以及使用 `uni.uploadFile()` 或者其他方式发送请求。

#### HTML 部分

<template>
  <view class="content">
    <!-- file picker -->
    <button type="primary" @click="chooseImage">选择图片</button>

    <!-- 显示已选中的图片 -->
    <image v-for="(item, index) in fileList" :key="index" :src="item.url"></image>
    
    <!-- 提交按钮 -->
    <button type="warn" @click="uploadImagesAsBinary">提交</button>
  </view>
</template>

#### JavaScript 部分

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          this.fileList.push(...res.tempFiles);
        }.bind(this),
        fail(err) {
          console.error('Failed to select image:', err);
        }
      });
    },

    uploadImagesAsBinary() {
      const formData = new FormData();
      
      // 将每张图片转成 Blob 对象加入到 formdata 中
      Promise.all(
        this.fileList.map((fileItem, idx) => {
          return new Promise(resolve => {
            uni.getFileSystemManager().readFile({
              filePath: fileItem.path,
              encoding: "binary",
              success(readRes) {
                let blob;
                
                try {
                  blob = new Blob([readRes.data], {type: fileItem.type});
                } catch (e) {
                  resolve(null); // 如果失败则跳过该条目
                  return;
                }

                formData.append(`file${idx}`, blob);

                resolve(blob);
              },
              fail(error) {
                console.log("Error reading file:", error);
                resolve(null);
              }
            });
          });
        })
      ).then(() => {
        // 发送 POST 请求至服务器端口处理程序
        fetch('/your-server-endpoint/upload', {
          method: 'POST',
          body: formData
        }).then(response => response.json())
         .then(data => {
           console.log('Success:', data);
         })
         .catch((error) => {
           console.error('Error uploading files as binary:', error);
         });
       });
     }
   }
}
</script>

此代码片段展示了如何通过 `uni-file-picker` 来选取一张或多张图片，并将这些图片转化为二进制形式的数据再上传给指定的服务接口[^1]。注意这里假设服务端有一个 `/your-server-endpoint/upload` 的路径用于接收上传的内容；实际应用时需替换为此处的具体实现地址。