ソースを参照

fix(上传设备): 修复文件拖拽验证和上传错误处理问题

- 在handleDrop中添加文件验证逻辑,验证失败时清空文件列表
- 完善customRequest中的错误处理,增加网络错误提示和错误回调调用
liujia 2 ヶ月 前
コミット
ca532fdc38
1 ファイル変更30 行追加10 行削除
  1. 30 10
      src/views/device/list/components/uploadDevice/index.vue

+ 30 - 10
src/views/device/list/components/uploadDevice/index.vue

@@ -105,6 +105,16 @@ const handleChange = (info: UploadChangeParam) => {
 
 function handleDrop(e: DragEvent) {
   console.log(e)
+  // 获取拖拽的文件
+  if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+    const file = e.dataTransfer.files[0]
+    // 调用beforeUpload进行验证
+    const isValid = beforeUpload(file)
+    if (isValid !== true) {
+      // 如果验证失败,清空文件列表
+      fileList.value = []
+    }
+  }
 }
 
 const headers = {
@@ -134,7 +144,7 @@ const repeateIds = ref<string[]>([])
 type UploadSuccessHandler = <T = any>(response: T, event?: ProgressEvent) => void
 
 const customRequest = (options: UploadRequestOption) => {
-  const { file, onProgress, onSuccess } = options
+  const { file, onProgress, onSuccess, onError } = options
   const customFile = file as CustomUploadFile
 
   // 创建 FormData
@@ -172,18 +182,28 @@ const customRequest = (options: UploadRequestOption) => {
       },
     })
     .then((response: AxiosResponse) => {
-      handleSuccess(response.data)
-      console.log('上传成功', response.data)
-      const { suc, msg, msgList } = response.data.data
-      if (suc) {
-        message.success(msg)
+      if (['200', 200].includes(response.data.code)) {
+        handleSuccess(response.data)
+        console.log('✅上传成功', response.data)
+        const { suc, msg, msgList } = response.data.data
+        if (suc) {
+          message.success(msg)
+        } else {
+          message.error(msg)
+        }
+        repeateIds.value = msgList || []
       } else {
-        message.error(msg)
+        const errorMsg = response.data.message
+        message.error(errorMsg)
+        onError?.(response.data)
       }
-      repeateIds.value = msgList || []
     })
     .catch((error) => {
-      options.onError?.(error)
+      console.log('❌上传失败', error)
+      const errorMsg = error.code === 'ERR_NETWORK' ? '网络异常,请重试' : error.message
+      error.message = errorMsg
+      message.error(errorMsg)
+      onError?.(error)
     })
 
   return {
@@ -250,7 +270,7 @@ const copyIdsHandler = () => {
     margin-top: 24px;
 
     .title {
-      fonst-size: 16px;
+      font-size: 16px;
       font-weight: 600;
     }
   }