将base64图片以Form-Data格式上传到图片服务器

  1. 将base64格式的图片处理为Blob对象。
// base64 转为Blob
function base64ToBlob(base64Data) {
  const dataArr = base64Data.split(','); // 根据,来分隔
  const imageType = dataArr[0].match(/:(.*?);/)[1]; // 获取文件类型。使用正则捕获 image/jpeg
  const textData = window.atob(dataArr[1]); // 使用atob() 将base64 转为文本文件
  const arrayBuffer = new ArrayBuffer(textData.length); // 创建一个二进制数据缓冲区,可以理解为一个数组
  const uint8Array = new Uint8Array(arrayBuffer); // 创建一个类型化数组对象,可以理解为上面的数组的成员,给这个对象赋值就会放到上面的数组中。
  for (let i = 0; i < textData.length; i++) {
    uint8Array[i] = textData.charCodeAt(i); // 将文本文件转为UTF-16的ASCII, 放到类型化数组对象中
  }
  return [new Blob([arrayBuffer], {type: imageType}), imageType.slice(6)]; // 返回两个值,一个Blob对象,一个图片格式(如jpeg)
}
  1. 将Blob对象添加到formData对象中。
// 转为formData
function toFormData(base64Data) {
  const [imageBlob, imageType] = base64ToBlob(base64Data); // 获取处理好的Blob 和文件类型
  const formData = new FormData();
  formData.append('file', imageBlob, `${Date.now()}.${imageType}`); // 添加到表单,传入文件名
  return formData;
}
  1. http请求头设置为context-type: multipart/form-data上送到文件服务器。
// 上传到照片服务器
export default function upload(base64Data) {
    const formData = toFormData(base64Data);
    return new Promise((resolve, reject) => {
        httpRequest(formData).then((res: any) => {
          resolve(res.data)
        }).catch((err) => {
            reject(err);
        });
    });
}
  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您需要使用 WebClient 来分批上传图片数据,并且要求使用 `multipart/form-data` 格式进行上报,可以按照以下步骤进行操作: 1. 将图片数据分割成较小的块。您可以使用 `File.ReadAllBytes` 方法将整个图片文件读取为字节数组,然后将字节数组分割成块。 2. 创建一个 `WebClient` 对象,并设置请求头的 `Content-Type` 为 `multipart/form-data`。代码示例如下: ```csharp WebClient client = new WebClient(); client.Headers.Add("Content-Type", "multipart/form-data"); ``` 3. 遍历每个块,依次上传。对于每个块,您需要构建一个 `NameValueCollection` 对象,用于存储上传的表单数据。然后通过 `UploadValues` 方法上传该块的数据。代码示例如下: ```csharp byte[] chunkData = // 从分割的块中获取数据 NameValueCollection formData = new NameValueCollection(); formData.Add("file", Convert.ToBase64String(chunkData)); // 将块中的数据转换为 Base64 字符串并添加到表单数据中 byte[] response = client.UploadValues("http://your-server-url", formData); // 处理服务器的响应 ``` 4. 在服务器端接收数据时,您需要根据 `multipart/form-data` 的格式进行解析。具体解析方式取决于服务器端的编程语言和框架。一般情况下,服务器端会提供相应的工具或库来处理 `multipart/form-data` 格式的数据。 注意:在进行分块上传时,您需要确保服务器端能够正确地将这些块合并成完整的图片文件。服务器端可能需要提供相应的接口支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值