关于uniapp上传图片的功能实现

首先来看一个效果图，点击确定按钮将信息提交到后台。

不墨迹了，直接上代码：

// 第一个image标签就是从本地上传的图片
// 第二个image标签是用来显示默认图片的
<view class="receiving">
	<text>微信收款码</text>
	<view class="money_imag_code fl-jus-sp" @tap="addImage">
		<image v-if="src" :src="src" style="height: 100%;width: 100%;"></image>
		<image v-else class="image" src="../../../static/img/category/xiangji1.png"></image>
	</view>
</view>

data() {
	return {
		src1: '', // 提交到后台的图片信息
		src: '', // 用来在前端展示的图片，如上面图片中显示的一样
	}
}

逻辑代码如下：

addImage() {
	var that = this;
	// 从本地相册选择图片或使用相机拍照。
	uni.chooseImage({
		count: 10, //最多可以选择的图片张数，默认9
		//album 从相册选图，camera 使用相机，默认二者都有。
		sourceType: ['album'],	
		success: function(res) {
			//获取图片信息。
			uni.getImageInfo({
				src: res.tempFilePaths[0],
				success: function(image) {
					that.src = (res.tempFilePaths[0]);
					console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
					//将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
					uni.uploadFile({
						//开发者服务器 url
						url: _this.global.baseUrl + 'common/upload',
						//获取要上传文件资源的路径。
						filePath: res.tempFilePaths[0],
						//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						name: 'file',
						//HTTP 请求 Header, header 中不能设置 Referer。
						header: {
							token: uni.getStorageSync('token')
						},
						//成功的回调
						success: uploadFileRes => {
							//获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
							var res1 = JSON.parse(uploadFileRes.data);
							that.src1 = res1.data.url;
							console.log(that.src1)
						}
					})
				}
			})	
		}
	})
}

到此结束！