网络文件分片断点续传，公众号素材管理，H5分享标题及图片配置杂记

2024-01-29 15:26:21

前言

本文将记录前端及后端是如何配合，来实现功能的demo。（代码是基于一些业务要求，所以并不适用于大众。）

正文

大文件分片

相信网上能找到很多的解决方案，大部分都是借用HTML5 File API，将大文件分成小块，然后逐块上传。

前端

// 大文件分片
function sliceFile(file, size) {
  const chunks = [];
  let start = 0;
  while (start < file.size) {
    const end = Math.min(start + size, file.size);
    chunks.push(file.slice(start, end));
    start = end;
  }
  return chunks;
}

后端

// 断点续传
function resumeUpload(Request $request) {
  $file = $request->files->get('file');
  $chunk = $request->input('chunk');
  $chunks = $request->input('chunks');
  $identifier = $request->input('identifier');

  // 将文件块存储到临时目录
  $chunkFile = fopen(sys_get_temp_dir() . '/' . $identifier . '_' . $chunk, 'wb');
  fwrite($chunkFile, $file->getContents());
  fclose($chunkFile);

  // 检查所有文件块是否都已上传
  if ($chunk == $chunks - 1) {
    // 将临时文件块合并为一个完整的文件
    $mergedFile = fopen(sys_get_temp_dir() . '/' . $identifier, 'wb');
    for ($i = 0; $i < $chunks; $i++) {
      $chunkFile = fopen(sys_get_temp_dir() . '/' . $identifier . '_' . $i, 'rb');
      fwrite($mergedFile, fread($chunkFile, filesize(sys_get_temp_dir() . '/' . $identifier . '_' . $i)));
      fclose($chunkFile);
      unlink(sys_get_temp_dir() . '/' . $identifier . '_' . $i);
    }
    fclose($mergedFile);

    // 将合并后的文件移动到指定位置
    rename(sys_get_temp_dir() . '/' . $identifier, 'uploads/' . $file->getClientOriginalName());

    // 返回成功信息
    return response()->json(['success' => true]);
  } else {
    // 返回继续上传的指示
    return response()->json(['success' => false, 'chunk' => $chunk + 1]);
  }
}

公众号素材管理

前端

// 获取公众号素材管理
function getMaterialList() {
  wx.request({
    url: 'https://api.weixin.qq.com/cgi-bin/material/batchget_material',
    data: {
      type: 'image',
      offset: 0,
      count: 20
    },
    success: function(res) {
      console.log(res.data);
    }
  });
}

后端

// 配置H5分享图片标题
function configShareImageTitle(Request $request) {
  $imageTitle = $request->input('imageTitle');
  // 将图片标题存储到数据库
  // ...

  // 返回成功信息
  return response()->json(['success' => true]);
}