投票评选活动小程序v2-用户报名图片上传

投票评选活动小程序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
})