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

组件上传

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

客户端 手动 api上传

&lt;template&gt;
	<view class="setFile"&gt;
		<view class="upload"&gt;
			<!-- 已经选择的图片循环遍历出来 --&gt;
			<view class="box" v-for="(item,index) in Flies" :key="index"&gt;
				<image mode="aspectFill" @click="onPreview(index)" :src="item.url"&gt;</image&gt;
				<view class="dele" @click="onDelectFlie(index)"&gt;x</view&gt;
			</view&gt;
			<!-- 加号的按钮，限制其图片最多为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.ch o oseImage方法,会选择图片进行上传到临时文件中

// 添加图片的临时回调
            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)
				})
				
			},