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)使其上传

完整代码如下

<template>
<view class="box" style="width: 750rpx;">
	

	<page-head  class="tit">请求下载图片</page-head>

	<view class="demo">
		<block v-if="imageSrc">
			<!-- 如果纯在图片 -->
			<image :src="imageSrc" class="image" mode="widthFix"></image>
		</block>
		<block v-else>
			<!-- 没有原始图片 -->
			<view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view>
		</block>
	</view>
</view>
</template>
<script>
	export default {
		data() {
			return {
				title: "请求下载图片",
				imageSrc: ''
			}
		},
		onLoad() {
			
		},
		onUnload() {
			// 关闭页面时
			this.imageSrc = '';
		},
		methods: {
			chooseImage: function() {
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => { //成功返回的函数
						console.log('图片路径为：', res.tempFilePaths[0]) //选着的图片
						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
								});
							}
						});
					},
					fail: (err) => { //图片接口调用失败的回调函数	
						console.log('chooseImage fail', err)

				// 判断是否允许调用摄像头
							    uni.getSetting({
						    	success: (res) => {
							 		let authStatus = res.authSetting['scope.album'];
							 		if (!authStatus) {
							 			uni.showModal({
							 				title: '授权失败',
											content: 'Hello uni-app需要从您的相册获取图片，请在设置界面打开相关权限',
							 				success: (res) => {
												if (res.confirm) {
													uni.openSetting()
												}
										}
									})
							 		}
							 	}
							 }) 
 

					}
				})
			}
		}
	}
</script>

<style>
	.image {
		width: 100%;
	}

	.tit {
		font-size: 40px;
		
		display: flex;
		justify-content: center;
		background-color: antiquewhite;
	}

	.demo {
		background: #FFF;
		padding: 50rpx;
	}

	.uni-hello-addfile {
		width: 100%;
		height: 500rpx;
		text-align: center;
		font-size: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: antiquewhite;
	}

	.uni-hello-addfile:active {
		background-color: aqua;
	}
</style>