前言

uniapp图片上传插件unifilePicker
在开发uniapp的时候上传文件是必不可少的，
本文的方案
1、通过unifilePicker插件来上传到云存储，然后云存储生成链接然后存入云数据库
2、通过原生的 uniCloud.uploadFile来上传到云存储，在通过云存储的链接添加到数据库

效果图

1、使用unifilePicker插件

（1）安装unifilePicker插件

（2）简单案例

<template>
	<view class="home">
		<view style="width:80%;margin: 0 auto">
			<text>上传文件</text>
			<input v-model="title" type="text" style='border:1px solid #ccc;height:40px;margin: 10px 0;'>
			<view class="upload">
				<!-- auto-upload：是否自动上传，默认为自动上传 -->
				<!-- limit:最多可以选择多少文件 -->
				<!-- 配置 file-mediatype 属性为 image，限定只选择图片 -->
				<!-- mode：上传的样式  grid：九宫格上传  list：列表上传 -->
				<!-- list-styles 格式 -->
				<!-- image-styles 格式 -->
				<!-- @select	选择文件后触发	
				@progress	文件上传时触发	
				@success	上传成功触发	
				@fail	上传失败触发	
				@delete	文件从列表移除时触发	-->
				<uni-file-picker :auto-upload="false" :limit="9" v-model="imageValue" fileMediatype="image" mode="grid"
					ref="files" @select="select" @progress="progress" @success="success" @fail="fail" />
			</view>
			<button @click="upload">上传</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imageValue: [],
				tempFiles: []
			}
		},
		methods: {
			// 手动上传
			upload() {
				// 插件上传
				this.$refs.files.upload()
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功', e)
				this.Add({
					title: this.title,
					file: e.tempFilePaths
				})
			},


			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			// 添加
			Add(obj) {
				uniCloud.callFunction({
					name: "cloudDemo1",
					data: obj
				}).then(res => {
					console.log(res)
				})
			},
		}
	}
</script>

2、通过原生的 uniCloud.uploadFile来实现

uni.chooseImage(OBJECT)选择文件的参数

uni.uploadFile(OBJECT) 上传文件的参数

<template>
	<view class='submit'>
		<input type="text" class='title' v-model="title" placeholder="标题">
		<input type="text" class='title' v-model='countent' placeholder="内容">
		<view class="imageArr">
			<view class="imagess" v-for="(item,index) in tempFiles" :key="index">
				<image :src='item.path' mode="aspectFill" @click='imageClick(index)'></image>
			</view>
			<view class="add imagess" @click='addImage'>+</view>
		</view>
		<button @click='upload'>创建</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				countent: '',
				tempFiles: []
			};
		},
		methods: {
			// 点击图片预览
			imageClick(index){
				uni.previewImage({
					urls:this.tempFiles,
					count:index	
				});
			},
			// 添加图片
			addImage() {
				uni.chooseImage({
					// 条数
					count: 3,
					success: res => {
						const newimg = res.tempFiles
						this.tempFiles = [...newimg, ...this.tempFiles]
					}
				})
			},

			upload() {
				// 原生上传
				let newsArr = this.tempFiles.map(async item => {
					return await this.uploadFun(item)
				})
				// 全部上传完成
				Promise.all(newsArr).then(res => {
					console.log(res)
					let arr = res.map(item => {
						return item.fileID
					})
					this.Add({
						title: this.title,
						countent: this.countent,
						files: arr
					})
				})
			},

			uploadFun(item) {
				return uniCloud.uploadFile({
					filePath: item.path,
					cloudPath: item.name,
					onUploadProgress:(progressEvent=>{
						// 进度条
						const presents = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					}),
					// 单个上传完成后调用
					// success() {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '上传成功',
					// 		duration: 1500
					// 	})
					// }
				})
			},
			
			// 添加的云函数
			Add(obj) {
				uniCloud.callFunction({
					name: "cloudDemo1",
					data: obj
				}).then(res => {
					console.log(res)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.submit {
		width: 90%;
		margin: 0 auto;

		.title {
			border: 1px solid #ccc;
			height: 40px;
			margin: 10px 0;
			padding: 2px
		}

		.imageArr {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;

			.imagess {
				display: inline-block;
				width: 205rpx;
				height: 7rem;
				border-radius: 5px;
				margin: 5px;

				image {
					width: 100%;
					height: 100%
				}
			}

			;

			.add {
				background: #ccc;
				font-size: 60px;
				text-align: center;
				line-height: 7rem;
			}
		}
	}
</style>

共同成长共同进步