foreword

The cloud storage used by developers uniCloudno longer needs to purchase storage space, CDN mapping, traffic purchase, etc. separately like the traditional model. This article mainly explains how to use uni-app to upload files to cloud storage in three ways.

1. Files can be directly uploaded in the uniCloud WEB console

2. Client API upload or component

Component upload

Directly use the FilePicker component of uni ui to import directly through HBuilder X, this method is the most concise

Client manual api upload

The advantage of this approach over components is the ability to customize styles

The first is the static layout

<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>

Then there is a callback to fill in the upload plus sign

The uni.chooseImage method is called here, and the image will be selected and uploaded to the temporary file

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

After selecting it is uploaded

Since multiple files may be uploaded at a time, but a single file is uploaded at a time in the api, the encapsulation method is required

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

Then write the upload function

// 图片上传
			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)
				})
				
			},

3. Cloud function to upload files to cloud storage

uniCloud.uploadFile,That is, write the client to upload files to the cloud function in cloud function js , and the cloud function uploads the file to the cloud storage. Such a process will lead to a large consumption of file traffic bandwidth. Therefore, the uploaded files are generally uploaded directly by the client. The overall process is similar to uploading on the client.

Summarize

The above is what I want to talk about today. This article introduces three ways to upload files to cloud storage in uni-app. Among the three ways, it is recommended to use the client API to upload directly.

Three ways for uni-app to upload files to cloud storage