Wix website builder中如何跨页关联upload button与download button

无代码实现方案（优先推荐，无需编程） #

全程通过Wix原生可视化配置完成，适合单一会员对应单份上传文档的场景：

• 提前配置权限：给上传页、下载页都开启会员访问限制，确保仅登录会员可访问，避免非授权用户拿到文件。
• 配置上传按钮：选中上传页的upload button，在右侧设置面板将上传存储位置指定为Wix媒体库的会员专属分类；前往会员管理面板新建一个「文件URL」类型的会员自定义字段，命名为会员上传文档，再回到上传按钮设置页，添加上传成功触发动作：将返回的文件地址自动写入当前登录会员的这个自定义字段，全流程点选配置即可，无需代码。
• 配置下载按钮：切换到下载页，选中download button，在按钮链接设置里不要选固定文件，选择动态链接源为「当前登录会员-会员上传文档」字段，将按钮点击动作设置为「下载链接对应文件」而非页面跳转。
• 校验逻辑：用测试会员账号登录上传测试文件，跳转至下载页验证可正常下载；切换其他账号登录，确认无法拿到非本人上传的文件即可。

注意：该方案默认单会员仅关联1份最新上传的文档，如果需要支持多文件上传、历史版本留存这类复杂逻辑，用下面的Velo代码方案更灵活。

Velo代码实现方案（支持自定义复杂逻辑） #

开启Wix Velo开发模式即可编写，逻辑轻量，适合有编程基础的用户调整扩展：

• 前置准备：开启Velo模式后，新建名为MemberUploads的数据库集合，添加3个字段：memberId（文本类型，存储会员唯一ID）、fileUrl（文本类型，存储上传文件的访问地址）、uploadTime（日期类型，存储上传时间），将集合权限设置为「会员仅可读写自己的条目」，从底层避免数据串号。
• 上传页代码：在上传按钮的上传完成回调里，将文件信息写入数据库，代码直接贴入页面代码面板即可：

$w.onReady(() => {
  const user = wixUsers.currentUser;
  // 绑定上传完成事件
  $w('#uploadButton').onUploadComplete(async (res) => {
    if (!res.success) return;
    // 将上传记录写入数据库
    await wixData.save('MemberUploads', {
      memberId: user.id,
      fileUrl: res.fileUrl,
      uploadTime: new Date()
    })
    // 可自行配置上传成功提示
    $w('#uploadSuccessTip').show();
  })
})

• 下载页代码：页面加载时拉取当前登录会员的上传记录，绑定到下载按钮：

$w.onReady(async () => {
  const user = wixUsers.currentUser;
  // 查询当前会员最新上传的文件
  const { items } = await wixData.query('MemberUploads')
    .eq('memberId', user.id)
    .order('uploadTime', 'desc')
    .find();
  
  if (items.length) {
    // 有上传记录时绑定下载链接
    $w('#downloadButton').link = items[0].fileUrl;
    $w('#downloadButton').show();
  } else {
    // 无上传记录时隐藏按钮，显示提示
    $w('#downloadButton').hide();
    $w('#noFileTip').show();
  }
})

• 扩展调整：如果需要支持多文件下载，只需将查询到的所有上传记录渲染为文件列表，给每个列表项绑定对应文件链接即可，也可以自行加权限判断、文件格式校验这类逻辑。

内容的提问来源于stack exchange，提问作者Ninad Nautiyal