优化 FileUpload 组件

src/components/FileUpload/index.vue

@@ -56,8 +56,8 @@ function beforeUpload(file) {
 function onExceed() {
     ElMessage.warning('文件上传超过限制')
 }
-function onSuccess(res, file) {
-    emit('on-success', res, file)
+function onSuccess(res, file, fileList) {
+    emit('on-success', res, file, fileList)
 }
 </script>
 

src/views/component_extend_example/upload.demo.vue

@@ -6,55 +6,43 @@
 }
 </route>
 
-<script>
-export default {
-    data() {
-        return {
-            image: '',
-            images: [],
-            files: [
-                {
-                    name: '测试文件.zip',
-                    url: 'http://images.lookbi.com/uploads/apply/96/d8521fc691e472eec91a170201866e7d.zip'
-                }
-            ]
-        }
-    },
-    mounted() {
-        this.image = 'https://picsum.photos/400'
-        this.images = [
-            'https://picsum.photos/400',
-            'https://picsum.photos/600',
-            'https://picsum.photos/500'
-        ]
-    },
-    methods: {
-        handleSuccess1(res) {
-            if (res.error == '') {
-                this.image = res.data.path
-            } else {
-                this.$message.warning(res.error)
-            }
-        },
-        handleSuccess2(res) {
-            if (res.error == '') {
-                this.images.push(res.data.path)
-            } else {
-                this.$message.warning(res.error)
-            }
-        },
-        handleSuccess3(res, file) {
-            this.files.push({
-                name: file.name,
-                url: res.error == '' ? res.data.path : ''
-            })
-            this.$nextTick(() => {
-                if (res.error != '') {
-                    this.$message.warning(res.error)
-                    this.files.pop()
-                }
-            })
-        }
+<script setup>
+const image = ref('https://picsum.photos/400')
+const images = ref([
+    'https://picsum.photos/400',
+    'https://picsum.photos/600',
+    'https://picsum.photos/500'
+])
+const files = ref([
+    {
+        name: '测试文件.zip',
+        url: 'http://images.lookbi.com/uploads/apply/96/d8521fc691e472eec91a170201866e7d.zip'
+    }
+])
+
+function handleSuccess1(res) {
+    if (res.error === '')
+        image.value = res.data.path
+
+    else
+        ElMessage.warning(res.error)
+}
+function handleSuccess2(res) {
+    if (res.error === '')
+        images.value.push(res.data.path)
+
+    else
+        ElMessage.warning(res.error)
+}
+function handleSuccess3(res, file, fileList) {
+    if (res.error === '') {
+        files.value.push({
+            name: file.name,
+            url: res.error === '' ? res.data.path : ''
+        })
+    } else {
+        fileList.pop()
+        ElMessage.warning(res.error)
     }
 }
 </script>
@@ -69,7 +57,7 @@ export default {
             <images-upload v-model:url="images" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess2" />
         </page-main>
         <page-main title="文件上传（默认最多3个）">
-            <file-upload :files="files" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess3" />
+            <file-upload :files="files" action="https://run.mocky.io/v3/e868a535-2569-4ba1-acad-fa10be2cef9e" @on-success="handleSuccess3" />
         </page-main>
     </div>
 </template>