uni-app之图片点击上传功能实现

目录

• • uni.chooseImage(OBJECT)

  • uni.uploadFile(OBJECT)

  • 点击上传图片

前言

uniapp上传一张图片大概分为二个步骤

1. 使用uni.chooseImage(OBJECT)获取到图片的路径
2. 使用uni.uploadFile(OBJECT)得到路径将其上传到页面

文章内容

一 、uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT 参数说明:

 更多属性请到官网查看：uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/media/image.html

使用方法：

	uni.chooseImage({
			count: 1, //最多可以选择的图片张数，默认9
			sizeType: ['compressed'],     //original 原图，compressed 压缩图，默认二者都有
			sourceType: ['album'], 
//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
			success: (res) => {           //成功返回的函数
			console.log('图片路径为：', res.tempFilePaths[0]) //选着的图片
},
			fail: (err) => {              //图片接口调用失败的回调函数	
			console.log('chooseImage fail', err)
							 		
							 	}
							 }) 

二、uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
url	String	是	开发者服务器 url
files	Array	是（files和filePath选其一）	需要上传的文件列表。使用 files 时，filePath 和 name 不生效。	App、H5（ 2.6.15+）
fileType	String	见平台差异说明	文件类型，image/video/audio	仅支付宝小程序，且必填。
file	File	否	要上传的文件对象。	仅H5（2.6.15+）支持
filePath	String	是（files和filePath选其一）	要上传文件资源的路径。
name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer。

  更多属性请到官网查看：

uni.uploadFile(OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/network-file.html

使用方法：

var imageSrc = res.tempFilePaths[0] //将图片的地址赋值给imageSrc
						uni.uploadFile({ //上传图片
							url: '@/detail_3/detail_3.vue', //开发者服务器 url
							filePath: imageSrc, //要上传文件资源的路径。
							fileType: 'image', //文件类型，image/video/audio
							name: 'data', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							success: (res) => { //接口调用成功的回调函数
								console.log('uploadImage success, res is:', res)
								uni.showToast({ //消息提示框
									title: '上传成功',
									icon: 'success',
									duration: 1000
								}),
								uni.setStorage({
									key:'image1',
									data:imageSrc
								})
								this.imageSrc = imageSrc
							},
							fail: (err) => { //接口调用失败的回调函数	
								console.log('失败返回：', err);
								uni.showModal({ //消息提示框
									content: err.errMsg, //错误信息
									showCancel: false
								});
							}
						});

总结

上传本地的电脑图片，需要使其相结合，将uni.chooseImage(OBJECT)得到的路径传给uni.uploadFile(OBJECT)使其上传

完整代码如下