投票评选活动小程序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 IDconsole.log(res.fileID)
}).catch(error => {// handle error
})