同时增删改多个附件解决方案

同时增删改多个附件解决方案

 

需求描述如下图：

 

 

 

 

 

由于同时涉及增删改、多文件、保存、取消、异常退出、源文件删除等多种情况，现将实现逻辑梳理如下图：

 

 

最终确定方案要点如下（不删除源文件）：

1. 进入修改页后，前端获取并保存初始附件数据，如下：
   let sourceData = {
       file1:'test1.jpg',
       file2:'test2.png',
       file3:'test3.pdf',
       file4:'test4.pdf',
       file5:'',
   }
2. 用户点击保存按钮前，可做任何操作，前端按要求记录每次操作结果：
   删除：例如删除file1，sourceData改为：
   sourceData = {
       file1:'',
       file2:'test2.png',
       file3:'test3.pdf',
       file4:'test4.pdf',
       file5:'',
   }
   修改：例如file2改为test6.png，先调用upload接口将test6.png传到服务器，服务器接收到文件后会将文件存入临时文件路径/tmp，前端接收返回的文件名后sourceData改为：
   sourceData = {
       file1:'',
       file2:'test6.png',
       file3:'test3.pdf',
       file4:'test4.pdf',
       file5:'',
   }
   增加：例如增加file5为test7.pdf，先调用upload接口将test6.png传到服务器，服务器接收到文件后会将文件存入临时文件路径/tmp，前端接收返回的文件名后sourceData改为：
   sourceData = {
       file1:'',
       file2:'test6.png',
       file3:'test3.pdf',
       file4:'test4.pdf',
       file5:'test7.pdf',
   }
3. 用户点击保存，将最终sourceData值传给后端即可。
4. 后端将接收的sourceData值与数据库对应值比对：
   相同则不做操作。不同则做真正的增删改操作，其中增和改需将文件从/tmp移动到目标文件夹。

 

此方案可以应对各种情况。