prefácio

O armazenamento em nuvem usado pelos desenvolvedores uniCloudnão precisa mais comprar espaço de armazenamento, mapeamento de CDN, compra de tráfego etc.

1. Os arquivos podem ser carregados diretamente no console UNICloud WEB

2. Upload ou componente da API do cliente

Carregamento de componentes

Use diretamente o componente FilePicker do uni ui para importar diretamente através do HBuilder X, este método é o mais conciso

Carregamento manual da API do cliente

A vantagem dessa abordagem sobre os componentes é a capacidade de personalizar estilos

Primeiro é o layout estático

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

Em seguida, há um retorno de chamada para preencher o sinal de adição de upload

O método uni.chooseImage é chamado aqui, e a imagem será selecionada e carregada no arquivo temporário

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

Depois de selecionar é carregado

Como vários arquivos podem ser carregados por vez, mas um único arquivo é carregado por vez na API, o método de encapsulamento é necessário

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

Em seguida, escreva a função de upload

// 图片上传
			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. Função de nuvem para fazer upload de arquivos para armazenamento em nuvem

uniCloud.uploadFile,Ou seja, escreva o cliente para fazer upload de arquivos para a função de nuvem na função de nuvem js , e a função de nuvem carrega o arquivo para o armazenamento em nuvem. Tal processo levará a um grande consumo de largura de banda do tráfego de arquivos. Portanto, os arquivos carregados geralmente são carregados diretamente pelo cliente. O processo geral é semelhante ao upload no cliente.

Resumir

O acima é o que eu quero falar hoje. Este artigo apresenta três maneiras de fazer upload de arquivos para armazenamento em nuvem em um único aplicativo. Entre as três maneiras, é recomendável usar a API do cliente para fazer upload diretamente.

Três maneiras de o uni-app fazer upload de arquivos para armazenamento em nuvem