uniapp拍照+上传后台 + pc端上传后台

news2024/11/17 13:30:44

uniapp

一、拍照,拿到本地路径

首先调用uniapp的api实现拍照

uni.chooseImage({
 	sourceType: ['camera','album'],//拍照或是打开系统相册选择照片
 	count: 3,  //最多三张
    success(res) {
 		if (Array.isArray(res.tempFilePaths)) {
            //最多选择三张,如果多选删掉前面选择的
		    if(res.tempFilePaths.length===3){
				pictures.length=0
			}else if(res.tempFilePaths.length==2&&pictures.length==2){
				pictures.splice(0,1)
		    }
            //把照片的路径放到数组里面
			res.tempFilePaths.forEach(item=>{
			    let picture = {url:item,show:false}
			    pictures.push(picture)
				// 保存到本地,(H5页面不可使用)
				uni.saveImageToPhotosAlbum({
					filePath: item,
				})
			})
 		}
    }
})

这时照片的路径是本地系统路径

二、传到后台

app端

uni.uploadFile({
    url:'后台地址',
    filePath:'文件路径',
    name:'file',
    success:(res)+>{
        console.log(res,'后台返回来的路径')
    }
})

app端到这一步就可以啦

若需要拿到照片的base64

由于 uni.chooseImage 不像 wx.chooseImage 提供了直接转为base64的方法,但是上传后台需要base64格式的图片,那么这时候就需要将临时路径转为base64格式。

方式1:只运行到APP端,就可以使用plus.io.resolveLocalFileSystemURL来转换

方式2:下载插件image-tools - DCloud 插件市场,也可以拿到base64

pc端

上传后台

先将图片的base64转成文件流

base64ToFile(base64){
	const dataArr = base64.split(',');
	const byteString = atob(dataArr[1]);
	const options = {
		type:'image/jpeg',
		endings:'native'
	};
	const u8Arr = new Uint8Array(byteString.length)
	for(let i=0;i<byteString.length;i++){
		u8Arr[i]=byteString.charCodeAt(i);
	}
    return new File([u8Arr],'照片名'+'.png',options)
},

然后再转成formData

let file = this.base64ToFile(base64);
let formData = new FormData();
formData.append('file',file)

然后直接将file传给后台就可以啦!后台就会可以返一个已经在服务器部署好的图片路径回来

所有代码附上(uniapp上da)

// 拍照片
getPic() {
	let pictures = this.pictures;
	let that = this;
	uni.chooseImage({
		sourceType: ['camera','album'],//实现拍照
		count: 3,
		// sourceType:['album'],//打开系统相册
		success(res) {
			if (Array.isArray(res.tempFilePaths)) {
				if(res.tempFilePaths.length===3){
					pictures.length=0
				}else if(res.tempFilePaths.length==2&&pictures.length==2){
					pictures.splice(0,1)
				}
				res.tempFilePaths.forEach(item=>{
					let picture = {url:item,show:false}
					pictures.push(picture)
					// 使用插件拿到照片的base64,转成formData
					//pathToBase64(item).then(base64 => {
					//	let file = that.base64ToFile(base64);
					//	console.log(file)
					//	let formData = new FormData();
					//	formData.append('file',file)
					//	console.log(formData)
                    //})
                    uni.uploadFile({
                        url:'后台地址',
                        filePath:item,
                        name:'file',
                        success:(res)+>{
                            console.log(res,'后台返回来的路径')
                        }
                    })
					// 保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: item,
					})
				})
			}
		}
	})
},
// 将拍的照片的base64转成文件格式然后再转成FormData,就可以使用上传图片的接口了
base64ToFile(base64){
	const dataArr = base64.split(',');
	const byteString = atob(dataArr[1]);
	const options = {
		type:'image/jpeg',
		endings:'native'
	};
	const u8Arr = new Uint8Array(byteString.length)
	for(let i=0;i<byteString.length;i++){
		u8Arr[i]=byteString.charCodeAt(i);
	}
	return new File([u8Arr],'phone.png',options)
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409848.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新安webpack插件后编译报错compiler.plugin is not a function

安装使用generate-asset-webpack-plugin时报错TypeError&#xff1a;compiler.plugin is not a function&#xff0c;网上搜索了一下大概就是webpack5与这些插件不匹配。推荐的方法几乎都是换一个适配的插件版本&#xff0c;但我所需要的这个插件在npm上最近更新时间是7年前&am…

Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理

Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理 目录 Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理 一、简单介绍 二、安装 vue-awesome-swiper 三、引入&#xff08;全局或局部引入&#xff09; 四、简单使用 一、简单介绍 Vue 开发的一些知识整理…

八个步骤实现一个Web项目(在线聊天室)

实现一个在线网页的聊天室 Hello&#xff0c;今天给大家带来的是我的一个Web项目的开发过程的相关步骤&#xff0c;这个项目实现的功能是一个Web在线聊天室&#xff0c;简单的来说就是实现在网页版的聊天框&#xff0c;能够实现对于用户信息进行注册&#xff0c;登录&#xff…

vue3、ts如何封装 axios,使用mock.js

今天我们一起来看一看 vue3ts如何优雅的封装axios&#xff0c;并结合 mock.js 实现敏捷开发&#xff1b; 但是我们要注意区分 Axios 和 Ajax &#xff1a; Ajax 是一种技术统称&#xff0c;技术内容包括&#xff1a;HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要…

Vue首次加载太慢之性能优化

Vue首次加载太慢之性能优化前言一、防止编译文件中出现map文件二、vue-router 路由懒加载三、使用gzip压缩四、使用CDN加载第三方库第一步&#xff1a;引入资源第二步&#xff1a;添加配置第三步&#xff1a;去掉原有的引用五、去掉代码中的console.log前言 首页加载很慢的问题…

Vite4 + Vue3 + vue-router4 动态路由

动态路由&#xff0c;基本上每一个项目都能接触到这个东西&#xff0c;通俗一点就是我们的菜单是根据后端接口返回的数据进行动态生成的。表面上是对菜单的一个展现处理&#xff0c;其实内部就是对router的一个数据处理。当然你只对菜单做处理也是可以的&#xff0c;但是没有任…

js中的内存泄漏

简版 内存泄漏一般是指变量的内存没有及时的回收&#xff0c;导致内存资源浪费。一般有三种情况出现内存泄露比较多。&#xff08;1&#xff09;常见的声明了一个全局变量&#xff0c;但是又没有用上&#xff0c;那么就有点浪费内存了&#xff0c;&#xff08;2&#xff09;定…

【Vue3】用Element Plus实现列表界面

&#x1f3c6;今日学习目标&#xff1a;用Element Plus实现列表界面 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人格言&#xff1a;生如芥子&#xff0c;心藏须弥 ⏰本期期数&#xff1a;第四期 &#x1f389;专栏系列&#xff1a;Vue3 文章目录前言效果图目录简介修改vite…

uniapp微信小程序实现连接低功耗蓝牙打印功能

微信小程序项目中有使用到蓝牙连接打印&#xff0c;参考官方文档做了一个参考笔记&#xff0c;这样使用的时候就按着步骤查看。 uni-app蓝牙连接 蓝牙&#xff1a; 1、初始化蓝牙 uni.openBluetoothAdapter(OBJECT) uni.openBluetoothAdapter({success(res) {console.log(…

毫米波雷达的硬件架构与射频前端

说明 本篇博文梳理(车载)毫米波雷达的系统构成&#xff0c;特别地&#xff0c;对其射频前端各部件做细节性的原理说明。本篇博文会基于对这方面知识理解的加深以及读者的反馈长期更新内容和所附资料&#xff0c;有不当之处或有其它有益的参考资料可以在评论区给出&#xff0c;我…

vue3.x结合element-plus如何使用icon图标

基于 Vue 3的Element Plus如何使用icon图标 首先注意Element Plus版本&#xff1a;官网如图所示&#xff0c; 基于vue3的具体如何使用&#xff1a; 参考官网文档&#xff1a; 1.首先选择一种方式安装 2.然后全局注册图标 在main.js或main.ts文件中引入&#xff1a; import …

【web前端开发】CSS文字和文本样式

文章目录前言字体大小字体粗细字体样式字体font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中⭐思维导图前言 本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图. 字体大小 属性名:font-size 取值: 数字px 注意: 谷歌浏览器默认…

无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core]

这是我在学习 JSTL 时产生的错误。没有使用 Maven 。 是手动引入 JSTL 包&#xff08;jstl.jar 和 standard.jar&#xff09;。在请求转发到 .jsp 界面&#xff0c;再没有使用 JSTL 语句前是通的&#xff0c;使用 JSTL 后就会报错。org.apache.jasper.JasperException: 无法在w…

【Vue】filter 过滤器用法

文章目录一、全局过滤器二、局部过滤器一、全局过滤器 语法&#xff1a; Vue.filter(name,function) - name: 过滤器名称 - function: 执行函数&#xff0c;必须有一个过滤后的返回值使用方法&#xff1a;变量名 | 过滤器名称 {{name | function()}}示例&#xff1a; <!D…

webpack的安装

webpack是当前前端最热门的前端资源模块化管理和打包工具。 安装webpack 首先要安装Node.js&#xff0c;Node.js自带了软件包管理工具npm&#xff0c;可以使用npm安装各种插件。Webpack至少需要Node.js v0.6版本&#xff0c;直接安装最新版就好了。 1.nodeJs官网&#xff0c…

Luckysheet本地导入时报错‘luckysheet‘ is not defined【已解决】

本文包含luckysheet本地安装以及报错解决&#xff0c;性子急可以直接按照目录划拉&#xff01; 目录 一、本地导入 二、报错luckysheet is not defined解决 最近正在开发的项目中需要类excel功能的东西&#xff0c;经过调研后决定用luckysheet&#xff0c;Luckysheet在线表格…

vite + vue3 —— vue地图大屏项目

​回顾 前期 ​ 前端利器 —— 提升《500倍开发效率》 传一张设计稿&#xff0c;点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点&#xff0c;那么我觉得就是它会&#xff0c;让你cv大法都没处使&#xff01;&#xff01;&#xff01;比如…

React 面向组件编程(下)

目录前言&#xff1a;一、受控组件与非受控组件1. 受控组件2. 非受控组件3. 效果展示4. 总结&#xff1a;二、组件的生命周期1. 对生命周期的理解2. 生命周期的三个阶段&#xff08;旧&#xff09;3. 生命周期的三个阶段&#xff08;新&#xff09;4. 新旧生命周期的区别5. 重要…

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…

JavaWeb之Cookie详解(一)

一.Cookie简介 Cookie是在HTTP协议下&#xff0c;服务器维护客户工作站上信息的一种方式&#xff0c;其作用是维护服务端与客户端浏览器的会话状态。由于HTTP协议的特点是无状态性&#xff0c;它对于事务处理没有记忆能力&#xff0c;所以服务端不会记录当前客户端浏览器的访问…