投票评选活动小程序v2-用户自行报名收集材料页面

主要收集项目或者作品图片及其描述，可以在后台进行统一录入，也可以是在用户界面，让用户自行报名上传。

这里开发了一个“我要报名”页面，在首页点击“我要报名”按钮跳转过来。

页面布局

这里页面布局三个要素：图片上传、多行文本、提交按钮。这里不再展开叙述。

小.程.序“投票评选活动小助手”

图片上传功能

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

概述为三步：

1、获取到选择上传的图片信息的临时路径；

2、通过wx.cloud.uploadFile将本地资源上传至云存储空间；

3、返回该图片文件路径fileID，根据需要做后续的操作。

// 上传图片uploadToCloud() {  wx.cloud.init();  const { fileList } = this.data;  if (!fileList.length) {    wx.showToast({ title: '请选择图片', icon: 'none' });  } else {    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));    Promise.all(uploadTasks)      .then(data => {        wx.showToast({ title: '上传成功', icon: 'none' });        const newFileList = data.map(item => ({ url: item.fileID }));        this.setData({ cloudPath: data, fileList: newFileList });      })      .catch(e => {        wx.showToast({ title: '上传失败', icon: 'none' });        console.log(e);      });  }}uploadFilePromise(fileName, chooseResult) {  return wx.cloud.uploadFile({    cloudPath: fileName,    filePath: chooseResult.url  });}

文件存储 -uploadFile

wx.cloud.uploadFile，将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写。

返回值：

如果请求参数中带有 success/fail/complete 回调中的任一个，则会返回一个 UploadTask 对象，通过 UploadTask 对象可监听上传进度变化事件，以及取消上传任务。

示例代码：

wx.cloud.uploadFile({  cloudPath: 'example.png',  filePath: '', // 文件路径}).then(res => {  // get resource ID  console.log(res.fileID)}).catch(error => {  // handle error})