feat(Sku): add custom-upload prop (#9389)

src/sku/README.zh-CN.md

@@ -340,6 +340,14 @@ messageConfig: {
       setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
     });
   },
+  // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
+  customUpload: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve('https://img01.yzcdn.cn/vant/leaf.jpg');
+      }, 1000);
+    });
+  },
   // 最大上传体积 (MB)
   uploadMaxSize: 3,
   // placeholder 配置

src/sku/components/SkuImgUploader.js

@@ -12,6 +12,7 @@ export default createComponent({
   props: {
     value: String,
     uploadImg: Function,
+    customUpload: Function,
     maxSize: {
       type: Number,
       default: 6,
@@ -56,6 +57,15 @@ export default createComponent({
     onDelete() {
       this.$emit('input', '');
     },
+
+    onClickUpload() {
+      if (this.customUpload) {
+        this.customUpload().then((url) => {
+          this.fileList.push({ url });
+          this.$emit('input', url);
+        });
+      }
+    },
   },
 
   render() {
@@ -63,10 +73,12 @@ export default createComponent({
       <Uploader
         vModel={this.fileList}
         maxCount={1}
-        afterRead={this.afterReadFile}
+        readonly={!!this.customUpload}
         maxSize={this.maxSize * 1024 * 1024}
+        afterRead={this.afterReadFile}
         onOversize={this.onOversize}
         onDelete={this.onDelete}
+        onClick-upload={this.onClickUpload}
       />
     );
   },

src/sku/components/SkuMessages.js

@@ -59,6 +59,8 @@ export default createComponent({
         messages[`message_${index}`] = item.value;
       });
 
+      console.log('messages', messages);
+
       return messages;
     },
 
@@ -141,6 +143,7 @@ export default createComponent({
               vModel={this.messageValues[index].value}
               maxSize={this.messageConfig.uploadMaxSize}
               uploadImg={this.messageConfig.uploadImg}
+              customUpload={this.messageConfig.customUpload}
             />
             <div class={bem('image-cell-label')}>{t('imageLabel')}</div>
           </Cell>