소스 검색

fix: handle activity editor image upload feedback

Developer 2 주 전
부모
커밋
a541191d2c
2개의 변경된 파일과 10개의 추가작업 그리고 7개의 파일을 삭제
  1. 7 5
      src/components/editor/index.vue
  2. 3 2
      tests/activity-image-upload.test.js

+ 7 - 5
src/components/editor/index.vue

@@ -89,12 +89,15 @@ export default {
                         server: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token') || ''}`,
                         fieldName: 'file',
                         maxFileSize: MAX_IMAGE_SIZE,
-                        onBeforeUpload: (file) => {
-                            if (file.size > MAX_IMAGE_SIZE) {
+                        // wangEditor 5 这里接收的是 Uppy 文件映射,不是单个 File。
+                        // 先在上传前主动提示,避免超大文件只被 Uppy 静默拒绝。
+                        onBeforeUpload: (files) => {
+                            const oversizedFile = Object.values(files || {}).find(file => file && file.size > MAX_IMAGE_SIZE)
+                            if (oversizedFile) {
                                 this.$message.error('图片大小不能超过10MB')
                                 return false
                             }
-                            return file
+                            return files
                         },
                         onFailed: (file, res) => {
                             this.$message.error((res && (res.msg || res.message)) || `${file.name}上传失败`)
@@ -115,8 +118,7 @@ export default {
                     insertImage: {
                         checkImage: (src) => {
                             const valid = /^https?:\/\/\S+$/i.test(src || '')
-                            if (!valid) this.$message.error('请输入有效的图片链接地址(需以 http:// 或 https:// 开头)')
-                            return valid
+                            return valid ? true : '请输入有效的图片链接地址(需以 http:// 或 https:// 开头)'
                         },
                         onInsertedImage: (image) => {
                             if (!image || !image.src) this.$message.error('图片链接插入失败')

+ 3 - 2
tests/activity-image-upload.test.js

@@ -11,7 +11,8 @@ test('富文本图片上传配置大小限制并提示失败原因', () => {
 
   assert.match(source, /MAX_IMAGE_SIZE\s*=\s*10\s*\*\s*1024\s*\*\s*1024/)
   assert.match(source, /maxFileSize:\s*MAX_IMAGE_SIZE/)
-  assert.match(source, /onBeforeUpload\s*:\s*\(file\)[\s\S]*file\.size\s*>\s*MAX_IMAGE_SIZE/)
+  assert.match(source, /onBeforeUpload\s*:\s*\(files\)[\s\S]*Object\.values\(files\s*\|\|\s*\{\}\)[\s\S]*file\s*&&\s*file\.size\s*>\s*MAX_IMAGE_SIZE/)
+  assert.match(source, /return false/)
   assert.match(source, /onFailed\s*:\s*\(file,\s*res\)/)
   assert.match(source, /onError\s*:\s*\(file,\s*xhr,\s*error\)/)
 })
@@ -19,7 +20,7 @@ test('富文本图片上传配置大小限制并提示失败原因', () => {
 test('富文本图片链接插入配置校验地址并反馈插入结果', () => {
   const source = fs.readFileSync(editorFile, 'utf8')
 
-  assert.match(source, /insertImage:\s*\{[\s\S]*checkImage:\s*\(src\)/)
+  assert.match(source, /insertImage:\s*\{[\s\S]*checkImage:\s*\(src\)[\s\S]*请输入有效的图片链接地址/)
   assert.match(source, /onInsertedImage:\s*\(image\)/)
 })