首页 > 其他分享 >解决uni-app在App端上传图片时路径转Base64的问题

解决uni-app在App端上传图片时路径转Base64的问题

时间:2024-03-11 13:22:24浏览次数:51  
标签:base64 console res app Base64 路径 error uni path

解决uni-app在App端上传图片时路径转Base64的问题

在用uni-app开发项目的时候大家都会遇到这么一个问题,
就是上传图片时在App上拿到的是文件路径,
然而后端要接收的却是Base64字符串,
这就尴尬了,在App端又无法调用Web Api(例如:Blob fileReader 等),
自己写插件的话又很麻烦,因此我找了很久才找到下面这个可以直接将Path转为Base64的插件。

image-tools

npm安装

npm i image-tools --save

文件内引入

import { pathToBase64, base64ToPath } from 'image-tools'

pathToBase64
从图像路径转换为base64,uni-app、微信小程序和5+APP使用的路径不支持网络路径,如果是网络路径需要先使用下载API下载下来。

pathToBase64(path).then(base64 => {
    console.log(base64)
})
.catch(error => {
    console.error(error)
})

base64ToPath
将图像base64保存为文件,返回文件路径。

base64ToPath(base64).then(path => {
    console.log(path)
})
.catch(error => {
    console.error(error)
})

可以利用promise来串行和并行的执行多个任务

// 并行
Promise.all(paths.map(path => pathToBase64(path)))
  .then(res => {
    console.log(res)
    // [base64, base64...]
  })
  .catch(error => {
    console.error(error)
  })
// 串行
paths.reduce((promise, path) => promise.then(res => pathToBase64(path).then(base64 => (res.push(base64), res))), Promise.resolve([]))
  .then(res => {
    console.log(res)
    // [base64, base64...]
  })
  .catch(error => {
    console.error(error)
  })
插件地址:https://www.npmjs.com/package/image-tools

标签:base64,console,res,app,Base64,路径,error,uni,path
From: https://www.cnblogs.com/haonanZhang/p/18065875

相关文章

  • uni-forms 和 uni-data-select 嵌套使用设定必填但初始化时不校验
    使用 uni-forms-item和 uni-data-select嵌套时,首先要注意的是:name=[]属性必须使用动态绑定,而且数组中的字符串必须和v-model的属性完全相同,如v-model="formatStationInfo.requiredSelect[index].curValue":name="['requiredSelect',index,'curValue']" :......
  • ChatGLM-6B模型基于 P-Tuning v2 微调脚本参数解释
    1、地址:https://github.com/THUDM/ChatGLM-6B/blob/main/ptuning/README.md2、参数示例PRE_SEQ_LEN=128LR=2e-2CUDA_VISIBLE_DEVICES=0python3main.py\--do_train\--train_fileAdvertiseGen/train.json\--validation_fileAdvertiseGen/dev.json\......
  • 【教程】APP备案全攻略:确保你的应用合规上线
    摘要本文详细介绍了中国大陆地区互联网信息服务提供者(AP)进行APP备案的流程、要求和注意事项。包括备案对象、备案方式、备案内容、备案流程等方面的详细说明,帮助开发者顺利完成APP备案手续。引言随着移动应用市场的不断扩大,APP备案成为应用上线的必要步骤。本文将针对如何进行A......
  • 【Unity】内存优化之— —Texture的MaxTextureSize以及Format压缩格式
    本人才疏学浅,只是近期略看了一下Texture的内存,如有不对的地方,还望大佬指正。参考文章:你所需要了解的几种纹理压缩格式原理1.说一说图片占用的内存关于图片的内存,是怎么算的呢,就是图片的长乘以宽,乘以每个像素点占的byte大小。MaxTextureSize,影响的就是基础的长和宽。图片的压......
  • Unity3D中刚体、碰撞组件、物理组件的区别详解
    Unity3D提供了丰富的功能和组件,其中包括刚体、碰撞组件和物理组件。这些组件在游戏开发中起着非常重要的作用,能够让游戏世界更加真实和有趣。本文将详细介绍这三种组件的区别以及如何在Unity3D中实现它们。对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白,也......
  • Unity3D Shader事项法线贴图功能详解
    Unity3D它提供了丰富的功能和工具,使开发人员能够轻松创建出色的游戏和应用程序。其中Shader是Unity3D中非常重要的一部分,它可以帮助开发人员实现各种视觉效果,包括法线贴图功能。对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白,也有一些正在从事游戏开发的技......
  • MYSQL学习笔记24: 多表查询(联合查询,Union, Union All)
    多表查询(联合查询,union,unionall)union查询需要多张表的列数一致,字段类型也保持一致对于union查询,就是把多次查询的结果合并起来,形成一个新的查询结果集select字段列表from表A...union[all]select字段列表from表B...;查询出薪资低于10000,或年龄......
  • Unicode、UTF-8、UTF-16
    文章转载自https://zhuanlan.zhihu.com/p/427488961下面两个链接也可以看看https://learn.microsoft.com/en-us/dotnet/standard/base-types/character-encoding-introductionhttps://symbl.cc/en/unicode/table/#hangul-syllables<imgsrc="https://pic3.zhimg.com/v2-7bf25......
  • 服务端工程师进化史-从零开始的APP开发(1)
    引题笔者开发了个漫画小说阅读APP,前前后后花了三个月,从服务端到前端,再到客户端,一路艰辛不言而喻。附上github的提交记录:起因2023年年末,笔者正为“高级系统架构师”的考试准备中,因资料太过于无聊,期间走神无数、三天打鱼两天晒网,到了临考期,已经是预计考不过的;也不知道为啥,在某......
  • 服务端工程师进化史-从零开始的APP开发(2)
    前奏上文:服务端工程师进化史-从零开始的APP开发(1)续上之前的进度,继续漫画/轻小说(阅读类)app代码公开计划,本篇计划开始准备项目的基础,第三方组件的部署。开源地址为了让广大读者最后能阅读到完整的项目代码,在此先附上开源地址,项目会随着文章的进度,持续公开。#服务端https://gi......