如何在Wix中将表单上传的文件按分类存储到对应文件夹？

功能可行性确认 #

Wix完全支持该需求，无需外接第三方服务，通过官方提供的Velo开发能力（原Wix Corvid）结合媒体存储API即可实现自动创建分类文件夹、归类存储用户上传文件的效果。

具体实现步骤 #

• 首先进入表单编辑页，给下拉分类组件、文件上传组件、表单组件分别设置唯一的组件ID，比如分类下拉框设为categorySelect、文件上传组件设为uploadField、表单组件设为uploadForm，后续代码会通过ID读取对应组件的值。
• 开启站点的Velo开发者模式，在后端代码区域新建后缀为.jsw的后端文件，命名为fileHandler.jsw，写入如下逻辑：

import { mediaManager } from 'wix-media-backend';

// 后端接口：根据分类创建文件夹并移动上传文件到对应目录
export async function processUploadedFile(uploadFileInfo, categoryName) {
  const targetFolder = `/user-uploads/${categoryName}/`;
  // 尝试创建分类文件夹，已存在的情况会抛出可忽略的报错
  try {
    await mediaManager.createFolder(targetFolder);
  } catch (err) {
    if (err.errorCode !== 'FolderAlreadyExists') throw err;
  }
  // 移动文件到目标分类文件夹
  const processedFile = await mediaManager.moveFile(uploadFileInfo.fileUrl, targetFolder);
  return processedFile;
}

• 打开表单所在页面的代码面板，写入前端表单提交绑定逻辑：

import { processUploadedFile } from 'backend/fileHandler.jsw';

$w.onReady(() => {
  // 绑定表单提交前的钩子事件
  $w('#uploadForm').onBeforeSubmit(async (event) => {
    // 阻止表单默认提交行为
    event.preventDefault();
    // 读取用户选择的分类和上传的文件
    const selectedCategory = $w('#categorySelect').value;
    const userUploadFile = $w('#uploadField').value[0];
    // 调用后端接口处理文件存储
    const finalFile = await processUploadedFile(userUploadFile, selectedCategory);
    // 把处理后的文件地址更新到表单对应字段
    $w('#uploadField').value = [finalFile];
    // 提交表单完成整个流程
    await $w('#uploadForm').submit();
  });
});

• 测试验证：选择不同的分类选项上传文件提交表单，进入Wix站点媒体管理器，即可在user-uploads目录下看到自动生成的对应分类文件夹，用户上传的文件会存储在对应文件夹内。

注意事项 #

• 请将代码中所有占位的组件ID替换为你自己站点内对应组件的实际ID，否则代码会无法正常运行。
• 若需要限制分类文件夹的访问权限，可在调用createFolder方法时传入权限配置参数，禁止未授权用户访问上传内容。
• 免费版Wix站点单文件上传上限为250MB，付费版可根据套餐等级提升到最高5GB。

内容的提问来源于stack exchange，提问作者Kavinda Keshan Rasnayake