添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

一、uni-app是什么?

uni-app实现了一套代码,同时运行到多个平台,例如:iOS模拟器、Android模拟器、H5、微信开发者工具等等;
想了解更多网址:
https://uniapp.dcloud.io/README

二、图片路径转成base64

1.引入插件

将下载好的插件引入到自己的项目中;
这个插件中有个两种方法:
一、pathToBase64()图像路径转换为base64
二、base64ToPath()图像base64保存为文件
插件地址:
https://ext.dcloud.net.cn/plugin?id=123

代码如下(示例):

import {pathToBase64,base64ToPath} from '../../image-tools/index.js'

2.调用uni.chooseImage方法

通过uni.chooseImage方法获取到用户需要上传的图片路径,再将图像路径转换为base64。
uni.chooseImage方法详见:
https://uniapp.dcloud.io/api/media/image?id=chooseimage
代码如下(示例):

const imageList: [],//存储图片路径用于图片展示
const baseImageList:[],//存储图片base64,用于上传后端
uni.chooseImage({
		count: 6, //最多可以选择的图片张数
		sizeType: ['compressed'], //original 原图,compressed 压缩图
		sourceType: ['album','camera'], //album 从相册选图,camera 使用相机
		//成功则返回图片的本地文件路径列表 tempFilePaths
		success:(res) => { 
			this.imageList = this.imageList.concat(res.tempFilePaths);//成功后利用concat方法追加到imageList中
			//循环遍历res.tempFilePaths将每一个图像路径转换为base64
			for(var i=0;i<res.tempFilePaths.length;i++){
				pathToBase64(res.tempFilePaths[i])
				.then(path => {
				    this.baseImageList = this.baseImageList.concat(path);//成功后利用concat方法追加到baseImageList中
				  .catch(error => {
				    console.error(error)

效果图如下:
图片路径转成Base64示例

3.删除图片的方法

<view class="uni-uploader-body">
	<view class="uni-uploader__files">
		<block v-for="(image,index) in imageList" :key="index">
			<view class="uni-uploader__file" style="position: relative;">
				<!-- 删除的图标以及删除的 delimage方法传递的参数 -->
				<uni-icons @click="delimage(image)" class="del" size="20" type="clear"></uni-icons>
				<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
			</view>
		</block>
		<view v-show="imageList.length < 6" class="uni-uploader__input-box">
			<view class="uni-uploader__input" @tap="chooseImage"></view>
		</view>
	</view>
</view>
//script中代码
delimage(index){
	this.imageList.splice(index, 1);
	this.baseImageList.splice(index,1);

主要是那个image-tools插件好用,为了找到个图像转base64花费了不少时间。
在我的项目中有头像上传,存在单张图片的情况而uni.chooseImage方法返回的结果是数组对象所以获取结果需要如下:
this.avatar =res.tempFilePaths[0];//关键是[0]

将图片路径转成Base64需求一、uni-app是什么?二、图片路径转成base641.引入插件2.调用uni.chooseImage方法3.删除图片的方法总结需求在uni-app项目开发中,需要将图片转成base64格式传递给后端一、uni-app是什么?uni-app实现了一套代码,同时运行到多个平台,例如:iOS模拟器、Android模拟器、H5、微信开发者工具等等;想了解更多网址:https://uniapp.dcloud.io/README二、图片路径转成base641.引入插
uniapp在H5下选取文件并上传到服务器 文件可以是图片、ppt、pdf等类型,主要借助于uni.chooseFile进行选择文件,然后借助uni.uploadFile进行上传到服务器。 1、html展示,提供一个上传按钮,在提供一个上传成功后展示容器 <view class="add-btn"> <image src="../../static/images/evidence/add-icon.png" mode=""></image> 支持 npm 命令自动生成组件和页面模板 支持 npm 命令更新 uni-app 编译器 、uni-ui 和 uview 打包优化:默认开启 gzip 压缩、摇树优化,移除 console 代码 引用方便 h5 调试 推荐使用(其他涉及到 npm 命令会用 yarn 介绍) # 1.安装依赖 npm i # 2.运行h5项目 yarn serve uni.chooseImage({ count: 1, //最多可以选择的图片张数,默认9 sourceType: ['album'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 sizeType: ['original'],//original 原图,compressed 压缩图,默认二者都有 success(res) { console.log('选择图片完成',
npm i image-tools --save //在使用的文件引入 pathToBase64(将图片转为base64) base64ToPath(将base64转为图片) import { pathToBase64, base64ToPath } from 'image-tools' 一般我们只会用到将图片base64,不会用到base64图片
1、base64编码简介 Base64是一种可逆的编码方式,简单来讲就是一种将64个Ascii字符来表示成二进制数据的方法。主要用于将不可打印的字符转换成可打印字符,或者简单的说将二进制数据编码成Ascii字符。Base64是网络上最常用的传输8bit字节数据的编码方式之一。特别适合在http,mine协议下快速传输数据。 2、图片转换成base64编码的意义 图片base64编码就是可以...
uni-app 微信小程序 上传图片 文件 uni.uploadFile()、uni.chooseImage() 微信小程序项目注册需要上传门店信息,所以需要用到上传图片功能。 可以分为两种情况: 实时上传,接口返回url,返显图片地址预览。所需API: uni.uploadFile()、uni.chooseImage()。 统一上传,接口统一接受所需字段,图片本地地址预览。所需API: uni.chooseImage()。 一、实时上传 点击选择框 首先使用uni.chooseImage(),从本地相
背景:本人想在url上传输一个json串(get请求),该json串较长且不确定是否有特殊字符,所以我选择先使用base64编码先对参数进行编码,然后再拼接到url上 学习过程:本人之前只了解base64,但是从来没有使用过,所以经过翻阅资料,了解了base64的各种版本,参考博客: https://blog.csdn.net/zhou_kapenter/article/details/628...
<view class="wu-example" @click="addImage()"> <view class="btns"> <view class="updateanswerimgbtn" :id="updateanswerimgbtn[question.sortnum]">上传答案</view>
由于 uni.chooseImage 不像 wx.chooseImage提供了直接转为base64方法,有时候上传后台需要base64格式的图片,那么这时候就需要将临时路径转为base64格式。 第一步:安装pathToBase64插件(https://ext.dcloud.net.cn/plugin?id=123) 第二步:引入js并结合 uni.chooseImge 使用 import { pathToBase64 } from '../js_sdk/m...
npm i image-tools --save //在需要使用的地方引入 import { pathToBase64, base64ToPath } from 'image-tools' uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: [
Uni-app是基于Vue.js框架和微信小程序开发的跨平台应用开发框架,可以实现一次开发,多端发布。在Uni-app,可以使用JS的zlib库对数据进行压缩和解压缩,然后使用Base64进行编码和解码。 具体实现方法如下: 1. 引入zlib库 在页面或组件引入zlib库,例如: import zlib from 'zlib'; 2. 使用zlib库进行压缩和解压缩 使用zlib库的deflate方法进行压缩,例如: let data = 'Hello world'; let compressedData = zlib.deflateSync(data); 使用zlib库的inflate方法进行解压缩,例如: let uncompressedData = zlib.inflateSync(compressedData); 3. 使用Base64进行编码和解码 在压缩和解压缩后,可以使用JS的btoa方法对数据进行Base64编码,例如: let base64Data = btoa(String.fromCharCode.apply(null, compressedData)); 也可以使用atob方法Base64编码的数据进行解码,例如: let decodedData = atob(base64Data); 可以根据实际需求选择是否使用Base64编码和解码。