uni-app实现上传文件至云存储的三种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app实现上传文件至云存储的三种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

1.在uniCloud WEB控制台中可以直接上传文件

2.客户端api上传或者组件

组件上传

客户端手动api上传

3. 云函数上传文件到云存储

总结

前言

开发者使用uniCloud的云存储，无需再像传统模式那样单独去购买存储空间、CDN映射、流量采购等，本篇文章主要讲解如何使用uni-app实现上传文件至云存储的三种方式。

1.在uniCloud WEB控制台中可以直接上传文件

uni-app实现上传文件至云存储的三种方式

2.客户端api上传或者组件

组件上传

直接使用uni ui的FilePicker组件通过 HBuilder X 直接导入,这种方法最简洁

uni-app实现上传文件至云存储的三种方式

客户端手动api上传

这种方法相对于组件的优势就在于能够自定义样式

首先是静态布局

<template>
	<view class="setFile">
		<view class="upload">
			<!-- 已经选择的图片循环遍历出来 -->
			<view class="box" v-for="(item,index) in Flies" :key="index">
				<image mode="aspectFill" @click="onPreview(index)" :src="item.url"></image>
				<view class="dele" @click="onDelectFlie(index)">x</view>
			</view>
			<!-- 加号的按钮，限制其图片最多为9张  -->
			<view class="box add" @click="addFile()" v-show="Flies.length<9">+</view>
		</view>
		<!-- 图片上传按钮 -->
		<button type="primary" @click="onToImage()">图片上传</button>
	</view>
</template>

css

<style lang="scss" scoped>
	.upload{
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.box{
			width: 200rpx;
			height: 200rpx;
			background-color: #eee;
			padding: 2rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.dele{
				position: absolute;
				font-size: 60rpx;
				top: -10rpx;
				left: 160rpx;
				color: #c5c5c5;
			}
		}
		.add{
			 font-size: 60rpx;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		}
	}
</style>

然后是填写上传加号的回调

这里调用uni.chooseImage方法,会选择图片进行上传到临时文件中

// 添加图片的临时回调
            addFile(){
				// 调用图库或者相机选择图片到零时路径
				uni.chooseImage({
					count:9,
					success:res=>{
                       //通过map函数对返回的数据进行过滤，返回自己选择的文件临时地址和名称
						let items = res.tempFilePaths.map((item,index)=>{
							return {
								url:item,
								name:res.tempFiles[index].name
							}
						})
						this.Flies.push(...items);
					    let numFile =  this.Flies.slice(0,9);
						this.Flies = numFile;
					}
				})
			},

选择之后就是上传了

由于一次可能上传多个文件，但是api中一次上传单个文件所以需要封装方法

itemToImage(item){
				// 返回一个Promise对象
				return  uniCloud.uploadFile({
                     //临时目录文件
					 filePath:item.url,
                    //当前选择的文件名称
					 cloudPath:item.name
				})
			},

然后是编写上传函数

// 图片上传
			onToImage(){
				// 使用map函数异步等待item的数据返回
				let newArr = this.Flies.map(async item=>{
                   //调用函数上传文件
					return await this.itemToImage(item)
				})
				// 监听一组Promise对象，然后then对成功的结果进行处理
				Promise.all(newArr).then(res=>{
					let arr = res.map(item=>{
						return item.fileID
					})
					this.picArr =arr;
					console.log(this.picArr)
				})
				
			},