uniapp base64数据 上传

97 阅读1分钟

处理卡顿1

const start1 = () => {
  testModule.startPreview();
  let isProcessing = false;
  
  clearInt = setInterval(() => {
    if (isProcessing) return;
    
    testModule.getOneFrameBuffer((ret) => {
      if (ret) {
        isProcessing = true;
        
        // 使用 setTimeout 替代 requestAnimationFrame
        setTimeout(() => {
          const buffer = hexToBuffer(ret);
          const base64String = arrayBufferToBase64(buffer);
          imageData.value = "data:image/jpeg;base64," + base64String;
          
          if (isNeedTakePhoto.value) {
            saveBaseImgFile(base64String);
            isNeedTakePhoto.value = false;
          }
          
          isProcessing = false;
        }, 0);
      }
    });
  }, 10);
};

处理卡顿2

const start1 = () => {
  testModule.startPreview();
  let lastFrameTime = Date.now();
  
  clearInt = setInterval(() => {
    const currentTime = Date.now();
    // 确保至少30ms的间隔
    if (currentTime - lastFrameTime >= 30) {
      testModule.getOneFrameBuffer((ret) => {
        if (ret) {
          const buffer = hexToBuffer(ret);
          const base64String = arrayBufferToBase64(buffer);
          imageData.value = "data:image/jpeg;base64," + base64String;
          lastFrameTime = currentTime;

          if (isNeedTakePhoto.value) {
            saveBaseImgFile(base64String);
            isNeedTakePhoto.value = false;
          }
        }
      });
    }
  }, 10);
};

处理base64 上传

const uploadBase64Image = async (base64String) => {
  // 1. 将 base64 转换为临时文件
  const [, format, bodyData] = base64String.split(/[:;,]/);
  const fileType = format.split('/')[1];
  
  // 2. 生成临时文件路径
  const tempFilePath = `${uni.env.USER_DATA_PATH}/temp_${Date.now()}.${fileType}`;
  
  // 3. 将 base64 写入临时文件
  await new Promise((resolve, reject) => {
    uni.getFileSystemManager().writeFile({
      filePath: tempFilePath,
      data: bodyData,
      encoding: 'base64',
      success: () => resolve(),
      fail: (err) => reject(err)
    });
  });

  // 4. 使用现有的上传方法
  const res = await myUpLoadFile({
    url: "api/topic/file",
    file: {
      path: tempFilePath,
      name: `temp_${Date.now()}.${fileType}`,
      type: format
    }
  });

  // 5. 上传完成后删除临时文件
  uni.getFileSystemManager().unlink({
    filePath: tempFilePath,
    complete: () => {
      console.log('临时文件已删除');
    }
  });

  return res;
};

// 使用示例
const handleBase64Upload = async (base64String) => {
  try {
    const res = await uploadBase64Image(base64String);
    console.log('上传成功', res);
    return res;
  } catch (error) {
    console.error('上传失败', error);
    throw error;
  }
};

使用方式:

// 假设你有一个 base64 图片字符串
const base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRg...';

// 调用上传方法
handleBase64Upload(base64Image)
  .then(res => {
    console.log('上传成功', res);
  })
  .catch(err => {
    console.error('上传失败', err);
  });

如果你需要处理多个 base64 图片:

const uploadMultipleBase64Images = async (base64Array) => {
  const uploadPromises = base64Array.map(base64 => uploadBase64Image(base64));
  return Promise.all(uploadPromises);
};

// 使用示例
const base64Images = [
  'data:image/jpeg;base64,...',
  'data:image/png;base64,...'
];

uploadMultipleBase64Images(base64Images)
  .then(results => {
    console.log('所有图片上传成功', results);
  })
  .catch(err => {
    console.error('上传失败', err);
  });
// 上传单个文件
const uploadFile = async (src) => {
  try {
    if (!src || !src.includes("base64")) {
      throw new Error("Invalid image format");
    }

    // 获取文件类型和base64数据
    const mimeType = src.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,/)[1];
    const base64Data = src.split(",")[1];

    // 创建临时文件
    const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.${
      mimeType.split("/")[1]
    }`;

    // 写入临时文件
    const fs = uni.getFileSystemManager();
    fs.writeFileSync(tempFilePath, base64Data, "base64");

    // 创建临时文件对象
    const tempFile = {
      path: tempFilePath,
      size: fs.statSync(tempFilePath).size,
      type: mimeType,
    };

    // 上传文件
    const res = await myUpLoadFile({
      url: "api/topic/file",
      file: tempFile,
    });

    // 删除临时文件
    fs.unlinkSync(tempFilePath);

    if (res.code === 1) {
      return res.data;
    } else {
      throw new Error(res.msg || "上传失败");
    }
  } catch (error) {
    console.error("Upload file error:", error);
    uni.showToast({
      title: error.message || "上传图片失败",
      icon: "none",
    });
    return null;
  }
};

// 批量上传图片
const uploadAnalysisBtn = async () => {
  try {
    const uploadPromises = [];

    // 收集所有需要上传的图片
    allData.value.forEach((item) => {
      item.imgSelectList.forEach((img) => {
        if (img.status === 1) {
          uploadPromises.push(
            uploadFile(img.url).then((url) => {
              if (url) {
                img.url = url;
              }
              return url;
            })
          );
        }
      });
    });

    // 等待所有图片上传完成
    const results = await Promise.all(uploadPromises);

    // 检查是否所有图片都上传成功
    if (results.every((url) => url)) {
      uni.showToast({
        title: "上传成功",
        icon: "success",
      });
      // 这里可以添加上传成功后的处理逻辑
    } else {
      throw new Error("部分图片上传失败");
    }
  } catch (error) {
    console.error("Upload analysis error:", error);
    uni.showToast({
      title: error.message || "上传失败",
      icon: "none",
    });
  }
};