fix(Uploader): file message should be reactive (#6142)

src/uploader/index.js

@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, addUnit, noop, isPromise } from '../utils';
+import { createNamespace, addUnit, noop, isPromise, isDef } from '../utils';
 import { toArray, readFile, isOversize, isImageFile } from './utils';
 
 // Mixins
@@ -147,7 +147,7 @@ export default createComponent({
         Promise.all(files.map((file) => readFile(file, this.resultType))).then(
           (contents) => {
             const fileList = files.map((file, index) => {
-              const result = { file, status: '' };
+              const result = { file, status: '', message: '' };
 
               if (contents[index]) {
                 result.content = contents[index];
@@ -161,7 +161,7 @@ export default createComponent({
         );
       } else {
         readFile(files, this.resultType).then((content) => {
-          const result = { file: files, status: '' };
+          const result = { file: files, status: '', message: '' };
 
           if (content) {
             result.content = content;
@@ -260,7 +260,7 @@ export default createComponent({
     },
 
     genPreviewMask(item) {
-      const { status } = item;
+      const { status, message } = item;
 
       if (status === 'uploading' || status === 'failed') {
         const MaskIcon =
@@ -270,12 +270,12 @@ export default createComponent({
             <Loading class={bem('loading')} />
           );
 
+        const showMessage = isDef(message) && message !== '';
+
         return (
           <div class={bem('mask')}>
             {MaskIcon}
-            {item.message && (
+            {showMessage && <div class={bem('mask-message')}>{message}</div>}
-              <div class={bem('mask-message')}>{item.message}</div>
-            )}
           </div>
         );
       }

src/uploader/test/__snapshots__/index.spec.js.snap

@@ -18,6 +18,25 @@ exports[`disable preview image 1`] = `
 </div>
 `;
 
+exports[`file message should be reactive 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-uploader__preview">
+      <div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__mask">
+        <div class="van-loading van-loading--circular van-uploader__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        <div class="van-uploader__mask-message">2</div>
+      </div>
+    </div>
+    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
+        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+  </div>
+</div>
+`;
+
 exports[`image-fit prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

src/uploader/test/index.spec.js

@@ -463,3 +463,27 @@ test('show-upload prop', () => {
   wrapper.setProps({ showUpload: false });
   expect(wrapper.contains('.van-uploader__upload')).toBeFalsy();
 });
+
+test('file message should be reactive', (done) => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      fileList: [],
+      afterRead(file) {
+        file.status = 'uploading';
+        file.message = 1;
+        setTimeout(() => {
+          file.message = 2;
+          expect(wrapper).toMatchSnapshot();
+          done();
+        });
+      },
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      },
+    },
+  });
+
+  wrapper.vm.onChange(file);
+});