目次
1. uniCloud WEBコンソールにファイルを直接アップロード可能
2. クライアント API のアップロードまたはコンポーネント
3. クラウドストレージにファイルをアップロードするクラウド機能
序文
開発者が利用するuniCloudクラウドストレージは、従来モデルのようにストレージ容量やCDNマッピング、トラフィック購入などを別途購入する必要がなくなり、この記事では主にuni-appを使ってクラウドストレージにファイルをアップロードする3つの方法について説明します。
1. uniCloud WEBコンソールにファイルを直接アップロード可能
2. クライアント API のアップロードまたはコンポーネント
コンポーネントのアップロード
Uni ui のFilePicker コンポーネントを直接使用して、HBuilder X 経由で直接インポートします。この方法が最も簡潔です。
クライアントの手動 API アップロード
コンポーネントに対するこのアプローチの利点は、スタイルをカスタマイズできることです。
1つ目は静的レイアウトです
<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 では一度に 1 つのファイルがアップロードされるため、カプセル化メソッドが必要です
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)
})
},3. クラウドストレージにファイルをアップロードするクラウド機能
uniCloud.uploadFile,つまり、クラウド関数にファイルをアップロードするクライアントをクラウド関数 jsに記述し、クラウド関数がファイルをクラウドストレージにアップロードするという処理を行うと、ファイルトラフィックの帯域を大量に消費することになります。したがって、アップロードされるファイルは通常、クライアントによって直接アップロードされます。全体的なプロセスはクライアントでのアップロードと似ています。
要約する
今回は以上が、uni-app でクラウドストレージにファイルをアップロードする 3 つの方法を紹介しますが、その中でもクライアント API を使用して直接アップロードすることをお勧めします。