文件上传之后再次打开，文件依然存在

目录

1.上传说明

2.问题1

3.问题2

4.其他问题

---

1.上传说明

文件上传使用了单独的组件，使用对话框内嵌套上传组件的方式，在主画面中点击导入按钮，弹出对话框。

2.问题1

问题：

①上传文件后，点击遮罩层取消或者点击取消按钮后，再次打开对话框，之前上传的文件依然存在。

②文件上传成功后，关闭对话框，再次打开对话框后，之前上传的文件依然存在。

原因：

通过对话框的是否可见的属性来控制对话框的显示和隐藏，点击取消按钮，对话框设置为不可见，点击导入按钮，对话框设置为可见。画面没有进行刷新时，控制对话框的显示和隐藏时，对话框及上传组件并没有重新加载，导致之前的文件内容存在。

解决方案：

①开启对话框的关闭时是否卸载节点的属性，开启此属性后，当对话框关闭时，会销毁对话框中的所有元素，这样下次打开后对话框内的元素会重新加载，就不会保留之前的内容。
所有的前端框架的对话框，抽屉之类的组件都有此属性。比如下面两个前端框架。

arco design：

element ui

② 可以在上传组件设置key属性，或在上传组件外面套一层div，设置key属性，
初始内容设置为Math.random()，在取消事件和上传完成事件中，将key的内容设置为Math.random(),这样再次打开对话框，发现key的内容不一致，会重新渲染上传组件，这样就不会保留之前的内容了。

参照：vue组件的重新渲染的问题-CSDN博客

3.问题2

问题：文件上传成功之后，再次打开对话框，不上传文件点击确定按钮，发现会上传上一次的文件内容

原因：当使用自定义上传的方式，上传之后，将文件信息存储在变量中，点击确定后，构建formdata对象，发起请求，请求完成后，没有对存储文件信息的变量进行清空，导致下次打开时即使没有上传文件，依旧可以读取到文件。

解决方案：打开上传对话框时，清空存储文件信息的变量。或者在上传成功后，清空存储文件信息的变量。

4.其他问题

文件需要追加是否为空的校验，没有上传文件，点击确定按钮进行校验，为空报错。