首页 > 其他分享 >uniapp使用第三方插件image-tools进行图片转base64

uniapp使用第三方插件image-tools进行图片转base64

时间:2023-11-21 16:23:02浏览次数:30  
标签:uniapp 插件 image base64 tools 图片

最近做的这个项目原来是原生android开发的,然后图片上传功能是  前端获取图片 -> 图片转成base64字符串(base64编码) -> 传递给服务器后端 -> 服务器接受base64字符串数据 -> 获取到的base64转成图片jpg (解码)-> 存入服务器,并写入数据库

后来因为原生安卓太麻烦了,转成了uniapp进行开发。

为了方便,也不想改后端代码了,就直接将uniapp获取到的图片进行base64编码,但是查了一下貌似uniapp并没有直接调用的方法,于是就需要借助第三方插件进行编码,具体实现如下:

1.新建一个空文件夹,进入控制台,输入  

npm init

会生成package.json

2.输入下载image-tools插件

npm i image-tools --save

此时会有这些文件生成

3.进入node_moudules文件中的image-tools吧index.js文件拿出来

 复制index.js文件到项目中(可以不在根目录下,但是得放在一个你方便调用的目录中)

比如我放在了common下,并且把index.js文件名字改成了image-tools.js

然后在需要调用的页面中引用:

uniapp选择图片:

 在post之前先进行数据的处理:

 这样imgWbase64和imgEbase64的值就变成base64啦,之后在服务器后端接收到base64字符串再把他解码成jpg存入数据库就好了

 

标签:uniapp,插件,image,base64,tools,图片
From: https://www.cnblogs.com/luzanzan/p/17846858.html

相关文章

  • uniapp之安卓端pdf预览
    uniapp之安卓端pdf预览原理:将文件下载到本地,使用uniapi预览文件exportPDF(){ uni.downloadFile({ url:"http://192.168.1.237:9000/profile/statute/937820.pdf", success:res=>{ console.log(res) if(res.statusCode===200){ ......
  • UNIAPP返回上一页并参数 uni.$on、uni.$off、uni.$once 和 uni.$emit
    WPFPrism事件聚合器-订阅/发布事件https://www.cnblogs.com/douyuanjun/p/17788957.html结合JS理解更容易理解:https://www.cnblogs.com/douyuanjun/p/17465402.html//传参给上一页confirm:function(){ if(this.list.length>=1){ //选择观演人 uni.$emit('selectV......
  • qq附近人提取脚本插件,微信wxid附近人提取接口工具,易语言代码分享,POST方式学习教程
    其实打开Qq附近人后它会返回一个数据包我们只需要把这个数据包提取解析出来就可以提取对方的wxid或者是QQ号,通过这个WXID还能直接加好友,而且是免费的接口,我今天把基础源码和案例图发给大家,免费分享,没有HOOK也没有逆向,就抓包实现的,正常逻辑哈,并非是违规开发。框架图:  转换后......
  • com.github.pagehelper分页插件优化
    重写插件查询sql总返回条数方法原sql,如果表很大会导致分页查询耗时很久<selectid="findUser"resultType="com.x.x.x.entity">selectcount(0)from(selecta.x,a.y,............fromuser_infowhere.....)tmp_count</select>例子 优化sql,重写插件统计方法在myba......
  • CodeWhisperer 一款好玩的 AI 插件
    忙里抽闲,今天试了试CodeWhisperer这款插件,我是在IDEA中做的测试,下面是我的一些使用感想: 安装CodeWhisperer插件:在IntelliJIDEA中,可以通过插件管理器安装CodeWhisperer插件,然后在项目中右键单击Java文件,选择CodeWhisperer菜单,打开CodeWhisperer窗口。编写测......
  • intellij idea 编写插件
    先从编写一个简单的单个点击事件开始,通过在菜单栏添加一个新功能然后点击弹出一个弹出框显示当前的文件名首先新建一个IDEPlugin的项目(本文是在Intellij2023.2.3Community版本创建)然后在src->main->resources->META-INF->plugin.xml文件添加一个action,表示要添加的点击事件,......
  • 去掉uniapp程序中顶部返回按钮
    去掉uniapp程序中顶部返回按钮1.javascript"autoBackButton":false在小程序下生效,H5不生效{"path":"pages/donation/list","style":{"navigationBarTitleText":"公益捐款"......
  • revit测试插件更新,测试纪要
    1、revit如何模拟测试插件更新测试方法修改注册表的UUID,满足这个UUID和最新的UUID不一致,会弹出更新提示备注:(1)一定要测试环境和测试环境对应,dev和dev对应(2)test要和test对应,要去对应发布环境  当开发有代码修改,此时去发布对应代码库的代码,然后本地做插件更新,更新完......
  • uniapp的tap和click事件获取原始dom元素
    uniapp支持tap和click事件必须在template模板中绑定tap事件会把event对象的target原生dom对象去除,替换为组件(未发现),文档上支持冒泡,还需测试要获取原始dom元素可在mounted周期自行addEventListener,方可读取 ......
  • 视频直播源码,图片选择器ImagePicker
    视频直播源码,图片选择器ImagePicker引入 gradleallprojects{  repositories{    maven{url'https://jitpack.io'}  }}implementation'com.github.DL-ZhangTeng:ImagePicker:1.5.0'//使用的三方implementation'com.github.bumptech.glide:glide:4.1......