SurveyJS文件上传功能中如何存储额外元数据

在Web表单开发中，文件上传是一个常见需求，而SurveyJS作为一款强大的表单库，提供了完善的文件上传功能。本文将深入探讨如何在SurveyJS中为上传的文件添加并存储额外的元数据。

问题背景

在使用SurveyJS的文件上传组件时，开发者经常需要存储与文件相关的额外信息，如文件URL、唯一ID和原始文件名等。这些元数据对于后续的文件管理和处理至关重要。

解决方案分析

SurveyJS的文件上传组件提供了几种处理元数据的方式：

方法一：利用content字段存储JSON数据

最直接的方法是将所有元数据序列化为JSON字符串，存储在文件的content属性中：

options.callback(
  options.files.map((file) => ({
    file: file,
    content: JSON.stringify({
      file_url: "https://example.com/uploads/file.jpg",
      file_id: "12345",
      file_name: "original.jpg"
    })
  }))
);

方法二：使用单独的数据结构存储

更推荐的做法是维护一个独立的数据结构来存储文件元数据：

// 上传处理
const filesInfo = {};
options.files.forEach(file => {
  filesInfo[file.name] = {
    file_url: "https://example.com/uploads/file.jpg",
    file_id: "12345",
    file_name: file.name
  };
});

// 提交时
const surveyData = survey.data;
surveyData.filesInfo = filesInfo;

实现细节

文件上传处理

在onUploadFiles事件处理器中，开发者需要：

1. 创建FormData对象并添加文件
2. 发送到服务器端处理
3. 接收服务器返回的元数据
4. 使用回调函数完成上传

survey.onUploadFiles.add((_, options) => {
  const formData = new FormData();
  options.files.forEach(file => formData.append(file.name, file));
  
  fetch(uploadUrl, { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
      const filesInfo = {};
      options.files.forEach(file => {
        filesInfo[file.name] = data[file.name];
      });
      
      options.callback(
        options.files.map(file => ({
          file: file,
          content: file.name // 或最小化数据
        }))
      );
    });
});

文件下载处理

当需要显示或下载文件时，可以通过onDownloadFile事件处理：

survey.onDownloadFile.add((_, options) => {
  const fileInfo = filesInfo[options.fileValue.name];
  fetch(fileInfo.file_url)
    .then(response => response.blob())
    .then(blob => {
      const file = new File([blob], fileInfo.file_name, {
        type: options.fileValue.type
      });
      const reader = new FileReader();
      reader.onload = e => options.callback("success", e.target.result);
      reader.readAsDataURL(file);
    });
});

最佳实践建议

1. 数据分离：保持文件内容与元数据的分离，避免将大量数据存储在SurveyJS的数据模型中
2. 性能考虑：对于大文件或大量文件，元数据应单独管理
3. 安全性：确保文件URL和ID等敏感信息的安全处理
4. 错误处理：完善上传和下载过程中的错误处理机制

通过以上方法，开发者可以灵活地在SurveyJS中管理文件上传的元数据，满足各种业务场景的需求。