尘埃粒子上传组件监听localStorage清除已选文件，根据区域筛选数据文件

src/views/component/uploadTxt.vue

@@ -1,19 +1,19 @@
 <template>
-  <div>
-    <label for="uploadTxt" :class="$style.upload">
-      <el-tooltip class="item" effect="dark" content="请选择格式为txt的原始数据文件" placement="top">
-        <div :class="$style.btn"><i class="el-icon-upload" />选择文件</div>
-      </el-tooltip>
-      <span :class="$style.file">{{ fileName }}</span>
-      <input
-        id="uploadTxt"
-        type="file"
-        accept=".txt"
-        hidden
-        @change="onChange"
-      >
-    </label>
-  </div>
+    <div>
+        <label for="uploadTxt" :class="$style.upload">
+            <el-tooltip class="item" effect="dark" content="请选择格式为txt的原始数据文件" placement="top">
+                <div :class="$style.btn"><i class="el-icon-upload"/>选择文件</div>
+            </el-tooltip>
+            <span :class="$style.file">{{ fileName }}</span>
+            <input
+                id="uploadTxt"
+                type="file"
+                accept=".txt"
+                hidden
+                @change="onChange"
+            >
+        </label>
+    </div>
 </template>
 <script>
     export default {
@@ -22,11 +22,39 @@
                 fileName: ''
             }
         },
+        mounted() {
+            (function(){
+                // 定义一个变量让setItem函数的值指向它
+                let originalSetItem = localStorage.setItem
+                // 重写setItem函数
+                localStorage.setItem = function (key, newValue) {
+                    // 创建setItemEvent事件
+                    let event = new Event('setItemEvent')
+                    event.key = key
+                    event.newValue = newValue
+                    // 提交setItemEvent事件
+                    window.dispatchEvent(event)
+                    // 执行原setItem函数
+                    originalSetItem.apply(this, arguments)
+                }
+            })()
+
+            let ele = document.getElementById('uploadTxt')
+            // 监听localStorage, 清除已选文件
+            window.addEventListener('setItemEvent', e => {
+                if (e.key === 'areaData') {
+                    ele.value = ''
+                    this.fileName = ''
+                }
+            })
+        },
         methods: {
             onChange(e) {
                 const { files } = e.dataTransfer || e.target
                 // console.log(files)
-                this.fileName = files[0].name
+                if (files && files.length) {
+                    this.fileName = files[0].name
+                }
             }
         }
     }