微信小程序使用云存储存入指定文件夹

前言

在我们开发微信小程序的时候常会用到云开发的功能，它相比传统的SQL上手难度低，比较适合没有什么后端基础的开发者使用。在具体的项目需求中我们会让用户上传一些图片或者表格，随着用户量增大，文件类型增多，云存储分类显得尤其重要。下面我举一个例子来带大家体会一下~

例：在图一的页面中需要用户提交三份文件，若是没有文件分类则会像图二那样

图一（每个用户需要提交三个文件）

图二（云存储里文件分布十分混乱）

实现存入指定文件夹

1.不妨我们将这三类文件分个类他们分别是satifactionSurvey\ fund\ activity's file（如图三）

图三

2.我们在wxml中使用button组件并绑定一个点击函数chooseFile和携带一个参数type

1.  
   <text class="subtitle_font">
2.  
   2.满意度调查情况：
3.  
   </text>
4.  
   <button bindtap="chooseFile" class='shangchuan' data-type="sati">上传附件调查表</button>
5.  
    
6.  
   <text class="subtitle_font">
7.  
   3.项目资金实际情况：
8.  
   </text>
9.  
   <button bindtap="chooseFile" class="shangchuan" data-type="fund">附件细项<text>*</text>
10.  
    </button>
11.  
     
12.  
    <text class="subtitle_font">
13.  
    4.活动文件（申报书，总结表，备忘录）：
14.  
    </text>
15.  
    <button bindtap="chooseFile" class='shangchuan' data-type="acti">上传活动文件表
16.  
    </button>

3.之后在JS文件中运用到一点点的技巧来减少代码冗余（简单的if判断）

1.  
   Page({
2.  
   data: {
3.  
   type:"",
4.  
          .....
5.  
   },
6.  
    
7.  
       onLoad(option){
8.  
       console.log("列表所携带的信息",option)
9.  
       id = option.id
10.  
        wx.cloud.database().collection("summaries")
11.  
        },
12.  
    //第一步：选择文件
13.  
    chooseFile(e){
14.  
    console.log("需要上传的文件类型是",e.currentTarget.dataset.type)
15.  
    this.setData({
16.  
    type:e.currentTarget.dataset.type
17.  
    })
18.  
    let that = this
19.  
    wx.chooseMessageFile({
20.  
    count: 1,
21.  
    type: 'all',
22.  
    success (res) {
23.  
    // tempFilePath可以作为img标签的src属性显示图片
24.  
    const tempFilePaths = res.tempFiles
25.  
    let tempFile = tempFilePaths[0]
26.  
    that.uploadFile(tempFile.name,tempFile.path)
27.  
    }
28.  
    })
29.  
    },
30.  
    //第二步：通过uploadFile上传选中的文件
31.  
    uploadFile(fileName,tempFile){
32.  
    if(this.data.type == "sati"){
33.  
    console.log("将要执行sati代码")
34.  
    wx.cloud.uploadFile({
35.  
    cloudPath:"satifactionSurvey/" fileName,
36.  
    filePath:tempFile,
37.  
    })
38.  
    .then(res=>{
39.  
    console.log("上传成功啦",res);
40.  
    wx.showToast({
41.  
    title: '文件上传成功',
42.  
    icon:"success",
43.  
    duration:2000
44.  
    })
45.  
    })
46.  
    .catch(err=>{
47.  
    console.log("上传失败啦",err);
48.  
    })
49.  
    }
50.  
    if(this.data.type == "fund"){
51.  
    console.log("将要执行fund代码")
52.  
    wx.cloud.uploadFile({
53.  
    cloudPath:"fund/" fileName,
54.  
    filePath:tempFile,
55.  
    })
56.  
    .then(res=>{
57.  
    console.log("上传成功啦",res);
58.  
    wx.showToast({
59.  
    title: '文件上传成功',
60.  
    icon:"success",
61.  
    duration:2000
62.  
    })
63.  
    })
64.  
    .catch(err=>{
65.  
    console.log("上传失败啦",err);
66.  
    })
67.  
    }
68.  
    if(this.data.type == "acti"){
69.  
    console.log("将要执行acti代码")
70.  
    wx.cloud.uploadFile({
71.  
    cloudPath:"activity's file/" fileName,
72.  
    filePath:tempFile,
73.  
    })
74.  
    .then(res=>{
75.  
    console.log("上传成功啦",res);
76.  
    wx.showToast({
77.  
    title: '文件上传成功',
78.  
    icon:"success",
79.  
    duration:2000
80.  
    })
81.  
    })
82.  
    .catch(err=>{
83.  
    console.log("上传失败啦",err);
84.  
    })
85.  
    }
86.  
    },

注意：在这里cloudPath就指的是你云存储的路径记得要用双引号括起来（图四），并且前面很长很长的字符串是不需要写进来的（图五）。

图四，存入指定文件的方法

图五，红框这一大窜字符是不用加入到路径里面的

在你完成上诉步骤后，就能实现比较高效的存入云存储了，并且还能分类得到，避免了文件过多而查找不到的方法。除此之外你还可以根据自己的喜好来给各个子文件分类（如图六2月份、3月份的fund之类）

图六，给每个子文件又分日期

结语

如果有疑问欢迎大家留言讨论，你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗？我们之间的交流是我最大的动力！