微信小程序如何实现文件收集功能？一文详解！-为明天百科

随着移动互联网的普及，微信小程序已经成为了人们日常生活中不可或缺的一部分，从购物、出行、点餐到娱乐、学习、工作，微信小程序几乎涵盖了我们生活的方方面面，而在这些应用场景中，文件收集功能的实现对于提高工作效率和满足用户需求具有重要意义，如何在微信小程序中实现文件收集功能呢？本文将为您详细解答。

什么是文件收集功能？

文件收集功能是指在微信小程序中，用户可以通过一定的操作方式将需要收集的文件上传至服务器或其他平台的功能，这种功能通常用于问卷调查、活动报名、资料提交等场景，可以帮助开发者快速收集用户的相关信息和文件资料。

微信小程序如何实现文件收集功能？一文详解！

如何实现微信小程序的文件收集功能？

1、在微信开发者工具中创建一个新的小程序项目，然后在项目的根目录下创建一个名为“collect”的文件夹，用于存放收集到的文件。

2、在app.json文件中添加如下代码，配置业务域名和上传文件大小限制：

{
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "uploadFileList": [
    {
      "name": "file",
      "accept": "file/mp4,image/jpeg,image/png"
    }
  ],
  "domain": {
    "requestDomain": ["https://yourserver.com"]
  },
  "cloud": true,
  "miniProgram": {
    "requireCloudStorage": true,
    "envVersion": "develop"
  }
}

domain字段用于设置业务域名，确保用户上传的文件能够正确地被服务器接收；uploadFileList字段用于配置可接受的文件类型；miniProgram字段中的requireCloudStorage字段设置为true表示开启云开发环境，envVersion字段设置为"develop"表示使用开发环境下的云开发能力。

3、在pages/index/index.wxml文件中添加如下代码，设计收集文件的界面：

<view class="container">
  <view class="input-group">
    <button type="primary" bindtap="chooseFile" class="btn">选择文件</button>
  </view>
  <view class="file-list">
    <block wx:for="{{fileList}}" wx:key="*this">
      <view class="file-item">
        <image src="{{item.thumbnailUrl}}" mode="aspectFill"></image>
        <text>{{item.name}}</text>
        <button type="danger" bindtap="deleteFile" data-url="{{item.url}}">删除</button>
      </view>
    </block>
  </view>
</view>

chooseFile方法用于调用微信小程序的API选择文件；deleteFile方法用于删除已上传的文件；fileList变量用于存储当前页面已选择的所有文件，在页面加载时，可以调用一次chooseFile方法触发文件选择框的弹出。

4、在pages/index/index.js文件中添加如下代码，实现文件选择和上传功能：

Page({
  data: {
    fileList: []
  },
  chooseFile() {
    const that = this;
    wx.chooseImage({
      count: 9, //最多可以选择的图片张数，默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], //从相册选择
      success(res) {
        const tempFilePaths = res.tempFilePaths; //临时文件路径列表，包含了用户选择的所有图片的路径信息
        wx.getTempFileSystemManager().readFiles({ files: tempFilePaths, encoding: 'base64', success(res) => {
          wx.cloud.callFunction({ name: 'uploadFiles', data: res.filePaths, success() {}, fail() {}) }); //调用云函数上传图片文件列表到服务器端
        }}).then((res) => {}); //异步读取成功后的操作(这里暂时不需要做任何处理)
      }
    })
      .then((res) => { //返回选定照片的本地文件路径列表的信息，tempFilePath可以作为img标签的src属性显示图片)const tempFilePaths = res.tempFilePaths;that.setData({ fileList: tempFilePaths });}); //更新数据并提示用户选择成功；console.log('选择了图片');console.log(that.data.fileList);//打印已选择的图片信息；return;}, deleteFile() {//删除已上传的图片let index = Math.floor(Math.random() * this.data.fileList.length);let url = this.data.fileList[index].url;//先调用云函数删除服务器端的图片再删除本地缓存let cloudFuncResult = await new Promise((resolve) => cloud.callFunction({ name: 'deleteFiles', data: url, success: resolve, fail: resolve})) console.log("删除服务器端" + url + "成功");console.log("删除本地缓存" + url + "成功");wx.getFileSystemManager().unlinkFile({ filePath: url, success() {}, fail() {} });//删除本地缓存this.setData({ fileList: this.data.fileList.slice(0, index), index });console.log("删除本地缓存" + url + "失败");console.log("删除服务器端" + url + "失败");return;}, onLoad() {}, uploadFiles(e) {//云函数入口参数为一个包含所有选中图片信息的数组let fileUrls = e.result;let index = Math.floor(Math.random() * fileUrls.length);let tempDirPath =${wx.env.USER_DATA_PATH}/temp/${(new Date()).getTime()};wx.mkdir({ dirPath: tempDirPath });//将选中的图片按顺序保存到临时目录中function saveImageToServer(index) {//获取临时目录下的图片名称const imageName =${tempDirPath}/${(new Date()).getTime()}.jpg;//保存图片到临时目录中wx.getFileSystemManager().writeFile({ filePath: imageName, data: fileUrls[index], encoding: 'binary', success() {}, fail() {} });//上传临时目录下的图片到云存储中cloud.uploadFile({ cloudPath:${tempDirPath}/${(new Date()).getTime()}.jpg, filePath: imageName, success() {}, fail() {} });}saveImageToServer(index);//上传完一张图片后继续上传下一张图片async function uploadAllImages() {try {//循环执行上传所有选中图片的任务await new Promise((resolve) => setTimeout(resolve, (Math.random() * (5000)) + (Math5000)));} catch (error) {}console.log("上传完成");}uploadAllImages();//上传完所有图片后从临时目录中移除它们function removeImagesFromTemDir() {wx.removeFileSync({ filePaths: [${tempDirPath}/${(new Date()).getTime()}.jpg,${tempDirPath}/${(new Date()).getTime()}.jpeg,${tempDirPath}/${(new Date()).getTime()}.png,${tempDirPath}/${(new Date()).getTime()}.bmp,${tempDirPath}/${(new Date()).getTime()}.gif] });}removeImagesFromTemDir();console.log('上传完成');}, deleteFiles(e) {//云函数入口参数为要删除的图片的url let url = e.result;//先从临时目录中删除该图片再从云存储中删除let cloudFuncResult = await new Promise((resolve) => cloud.callFunction({ name: 'delFilesInServer', data: url, success: resolve, fail: resolve})) console.log("删除服务器端" + url + "成功");console.log("删除本地缓存" + url + "成功");wx.getFileSystemManager().unlinkFile({ filePath: url, success() {}, fail() {} });//删除本地缓存this.setData({ fileList: this.data.fileList.filter((item) => item !== item), index });console.log("删除本地缓存" + url + "失败");console.log("删除服务器端" + url + "失败");return;}, delFilesInServer(e) {}//初始化一些变量let index = Math.floor(Math.random()