ZBLOG

uniapp 多张图片压缩成一个文件上传 使用上面适配uniapp的loadImage函数

要将多张图片压缩成一个文件并上传,在适配uniapp的loadImage函数基础上,您可以按以下步骤进行操作:

  1. 修改loadImage函数,使其接收一个包含多个图片url的数组作为参数。
  2. 遍历图片数组,使用Promise.all来异步加载所有图片,并在加载完成后执行压缩和合并的操作。
  3. 压缩和合并可以使用canvas绘制的方式,将每张图片绘制到同一个canvas上。请注意,由于canvas有大小限制,如果需要处理较大数量或较大尺寸的图片,请确保对图片进行合理裁剪或压缩。
  4. 最后,将合并后的canvas转换为文件,并通过uni.uploadFile方法上传到服务器。

下面是示例代码:

  1. function compressAndUploadImages(imageUrls) {
  2. return new Promise((resolve, reject) => {
  3. const canvas = document.createElement('canvas');
  4. const ctx = canvas.getContext('2d');
  5. // 获取最大宽高
  6. let maxWidth = 0;
  7. let maxHeight = 0;
  8. for (let i = 0; i < imageUrls.length; i++) {
  9. const url = imageUrls[i];
  10. uni.getImageInfo({
  11. src: url,
  12. success: (res) => {
  13. if (res.width > maxWidth) {
  14. maxWidth = res.width;
  15. }
  16. if (res.height > maxHeight) {
  17. maxHeight = res.height;
  18. }
  19. // 绘制图片到canvas
  20. const img = new Image();
  21. img.crossOrigin = 'anonymous';
  22. img.onload = () => {
  23. ctx.drawImage(img, 0, 0);
  24. };
  25. img.onerror = (error) => {
  26. reject(error);
  27. };
  28. img.src = url;
  29. },
  30. fail: (error) => {
  31. reject(error);
  32. }
  33. });
  34. }
  35. // 设置canvas尺寸
  36. canvas.width = maxWidth;
  37. canvas.height = maxHeight;
  38. // 将canvas转换为文件并上传
  39. canvas.toBlob((blob) => {
  40. const formData = new FormData();
  41. formData.append('file', blob, 'compressed_image.png'); // 指定上传的文件名和类型
  42. uni.request({
  43. url: 'your_upload_url',
  44. method: 'POST',
  45. data: formData,
  46. header: {
  47. 'Content-Type': 'multipart/form-data'
  48. },
  49. success: (res) => {
  50. resolve(res.data);
  51. },
  52. fail: (error) => {
  53. reject(error);
  54. }
  55. });
  56. }, 'image/png'); // 根据需要指定压缩后的图片格式
  57. });
  58. }
  59. // 使用示例
  60. const imageUrls = ['url1', 'url2', 'url3']; // 替换为实际的图片url数组
  61. compressAndUploadImages(imageUrls)
  62. .then((response) => {
  63. console.log(response); // 处理上传成功的响应结果
  64. })
  65. .catch((error) => {
  66. console.error(error); // 处理上传失败或错误信息
  67. });

请根据您的实际需求和服务器接口进行相应调整,并确保代码适配uniapp框架。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=13542

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?