同时增删改多个附件解决方案
需求描述如下图:
由于同时涉及增删改、多文件、保存、取消、异常退出、源文件删除等多种情况,现将实现逻辑梳理如下图:
最终确定方案要点如下(不删除源文件):
- 进入修改页后,前端获取并保存初始附件数据,如下:
let sourceData = {
file1:‘test1.jpg‘,
file2:‘test2.png‘,
file3:‘test3.pdf‘,
file4:‘test4.pdf‘,
file5:‘‘,
} - 用户点击保存按钮前,可做任何操作,前端按要求记录每次操作结果:
删除:例如删除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‘,
} - 用户点击保存,将最终sourceData值传给后端即可。
- 后端将接收的sourceData值与数据库对应值比对:
相同则不做操作。不同则做真正的增删改操作,其中增和改需将文件从/tmp移动到目标文件夹。
此方案可以应对各种情况。