uniapp基础篇之上传图片的实战步骤

 更新时间:2022年12月09日 11:28:05   作者:彭式程序猿  
应用uni-app开发跨平台App项目时,上传图片、文档等资源功能需求十分常见,下面这篇文章主要给大家介绍了关于uniapp基础篇之上传图片的相关资料,需要的朋友可以参考下

一、今日学习目标

实现uniapp上传图片

二、实战步骤

1. 了解uni.chooseImage(OBJECT)

特别说明下crop参数,是图像裁剪的参数

// uni.chooseImage() 基本示例
uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

使用注意事项:

  • count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
  • sourceType 值在 H5 平台根据浏览器的不同而表现不同,一般不可限制仅使用相册,部分浏览器也无法限制是否使用相机。

2. 了解uni.uploadFile(OBJECT)

介绍:将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data

// 示例代码
uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

3. 在项目中上传图片

// 项目实战中使用
uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0])
						_this.logo_list = tempFilePaths[0]
						uni.uploadFile({
							url: 'https://xx.com/center/group/icon', //上传图片api
							filePath: tempFilePaths[0],
							name: 'groupicon',
							header:{
								"Authorization": userinfo.token
							},
							success: (res) => {
								let group =  JSON.parse(res.data) 
								uni.showToast({
									title:"上传成功",
									icon:"success"
								})
							}
						});
					}
				});

图片上传进度监听 uploadTask()

在uniapp中上传图片,需要uni.chooseImage()和uni.uploadFile()这两个api结合使用,才能完成图片的上传,还有一个uploadTask(),可以用来监听上传进度变化事件,和取消上传任务。我们根据项目需求去决定要不要添加这个监听行为。

// 示例
uploadTask.onProgressUpdate((res) => {
			console.log('上传进度' + res.progress);
			console.log('已经上传的数据长度' + res.totalBytesSent);
			console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

			// 测试条件,取消上传任务。
			if (res.progress > 50) {
				uploadTask.abort();
			}
		});

 总结

到此这篇关于uniapp基础篇之上传图片的文章就介绍到这了,更多相关uniapp上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现简单页面倒计时

    javascript实现简单页面倒计时

    这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • js检测离开或刷新页面时表单数据是否更改的方法

    js检测离开或刷新页面时表单数据是否更改的方法

    这篇文章主要介绍了js检测离开或刷新页面时表单数据是否更改的方法,涉及javascript表单操作及事件响应的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 利用d3.js制作连线动画图与编辑器的方法实例

    利用d3.js制作连线动画图与编辑器的方法实例

    这篇文章主要给大家介绍了关于如何利用d3.js制作连线动画图与编辑器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用d3.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 微信小程序实现点赞、取消点赞功能

    微信小程序实现点赞、取消点赞功能

    这篇文章主要为大家详细介绍了微信小程序实现点赞、取消点赞,和多项点击功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS异步的执行原理和回调详解

    JS异步的执行原理和回调详解

    这篇文章主要给大家介绍了关于JS异步的执行原理和回调的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • javascript回到顶部特效

    javascript回到顶部特效

    这篇文章主要为大家详细介绍了javascript回到顶部特效,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-07-07
  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    这篇文章主要为大家详细介绍了利用JS定时器实现元素移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 在Js页面通过POST传递参数跳转到新页面详解

    在Js页面通过POST传递参数跳转到新页面详解

    这篇文章主要给大家介绍了关于在Js页面通过POST传递参数跳转到新页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-08-08
  • js面向对象之公有、私有、静态属性和方法详解

    js面向对象之公有、私有、静态属性和方法详解

    这篇文章主要详细介绍了js面向对象之公有、私有、静态属性和方法,并附上详细的示例,非常的细致全面,这里推荐给大家,有需要的小伙伴可以参考下
    2015-04-04
  • js实现人才网站职位选择功能的方法

    js实现人才网站职位选择功能的方法

    这篇文章主要介绍了js实现人才网站职位选择功能的方法,涉及javascript动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论