【uni-app】上传图片 uni.chooseImage(),uni.uploadFile()接口使用

图片上传在实际场景中使用广泛，例如商品图片，汽车图片等等

一，场景

实现选择单张图片上传，可以删除图片。（预览功能时间原因未研究）

二，实现

Vue2 版本，使用uni-app框架api唤起手机相册等图片源，将图片选中到目标列表，并发送到服务器存储，存储成功得到处理后的图片名称存储到字段中。

<template>
	<view class="cu-form-group" style="border-top: 20rpx solid #eee;">
		<view class="action">
			图片
		</view>
		<view class="action">
			{{imgList.length}} / 4
		</view>
	</view>
	<view class="cu-form-group" style="border-top: 0rpx solid #eee;">
		<view class="grid col-4 grid-square flex-sub">
			<view class="bg-img" v-for="(item,index) in imgList" :key="index"
				:data-url="imgList[index]">
				<image :src=baseUrl+item  mode="aspectFill"></image>
				<view class="cu-tag bg-red"  @tap.stop="delImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<view class="solids" @tap="chooseImage" v-if="imgList.length < count">
				<text class='cuIcon-cameraadd'></text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
		 		//图片总允许上传数目
				count: 4,
				//存储服务器返回的文件名称
				imgList: [],
				//存储选择的本地图片文件路径列表
				tempImgList: [],
				//服务器图片资源获取接口
				baseUrl: 'http://xxxxx/systemConfig/static/',
		},
			methods: {
			/**
			 * 上传图片到服务器
			 */
			uploadImg(){
				uni.uploadFile({
					url: 'http://xxxxx/systemConfig/upload', //真实的接口地址
					//每次保存最新的图片到服务器
					filePath: this.tempImgList[this.tempImgList.length-1],
					name: 'file',
					header: {
						'content-type': 'multipart/form-data',
						'X-Access-Token': uni.getStorageSync('Access-Token')
					},
					success: (uploadFileRes) => {
						let ress = JSON.parse(uploadFileRes.data)
						//将服务器返回的文件名进行存储，存储到记录对象中，使能从服务器获取图片资源
						this.imgList.push(ress.data);
					}
				});
			},
			/**
			 * 选择图片上传
			 */
			chooseImage() {
				uni.chooseImage({
					count: 1, //单词最多允许选中，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// 获取到图片的本地文件路径列表，存储到临时列表tempImgList中
						if (this.tempImgList.length != 0) {
							this.tempImgList = this.tempImgList.concat(res.tempFilePaths)
						} else {
							this.tempImgList = res.tempFilePaths
						}
						this.uploadImg()
					}
				});
			},
			/**
			 * 预览图片 urls所有的url地址，current选中的url地址
			 * @param {Object} e 
			 */
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			/**
			 * 删除图片
			 * @param {Object} e
			 */
			delImg(e) {
				uni.showModal({
					title: '',
					content: '确定要删除第'+(e.currentTarget.dataset.index+1)+'张图片吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>

三，效果

1. 无照片时
   
2. 多张图片时
   
3. 满图片时
   
4. 删除第n张图片