feat(uploader): support beforeUpload in taro (#3188)

* feat: upload

* fix: prettier

Author: Alex-huxiyang

packages/nutui-prettier-plugin/index.js

@@ -34,7 +34,15 @@ function printTable(path, options, print) {
   const contents = path.map(
     () =>
       path.map(() => {
-        const text = print().flat(Infinity).join('')
+        const text = print()
+          .flat(Infinity)
+          .map((item) => {
+            if (typeof item === 'string') {
+              return item
+            }
+            return item.parts.flat(Infinity).join('')
+          })
+          .join('')
         return { text }
       }, 'children'),
     'children'

packages/nutui-taro-demo/src/dentry/pages/uploader/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Demo class="bg-w">
     <h2>基础用法</h2>
-    <nut-uploader :url="uploadUrl"></nut-uploader>
+    <nut-uploader :url="uploadUrl" :before-upload="beforeUpload"></nut-uploader>
     <h2>上传状态</h2>
     <nut-uploader v-model:file-list="defaultFileList" :url="uploadUrl" maximum="3" multiple @delete="onDelete">
     </nut-uploader>
@@ -20,7 +20,7 @@
     <nut-progress
       :percentage="progressPercentage"
       stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-      :status="progressPercentage == 100 ? '' : 'active'"
+      :status="progressPercentage == 100 ? undefined : 'active'"
     >
     </nut-progress>
     <!--
@@ -104,6 +104,14 @@ const defaultFileList1 = reactive([
     type: 'image'
   }
 ])
+const beforeUpload = async (files: FileList) => {
+  console.log('beforeUpload 触发')
+  const allowedTypes = ['image/png']
+  const filteredFiles = Array.from(files).filter(file =>
+    allowedTypes.includes(file.type)
+  )
+  return filteredFiles
+}
 const onOversize = (files: File[]) => {
   console.log('oversize 触发 文件大小不能超过 50kb', files)
 }

src/packages/__VUE/uploader/doc.taro.md

@@ -270,6 +270,7 @@ const clearUpload = () => {
 | disabled | 是否禁用文件上传 | Boolean | `false` |
 | multiple | 是否支持文件多选 | Boolean | `true` |
 | timeout | 超时时间，单位为毫秒 | Number \| String | `1000 * 30` |
+| before-upload | 上传前的函数需要返回一个`Promise`对象 | Function | `null` |
 | before-xhr-upload | 执行 `Taro.uploadFile` 上传时，自定义方式 | Function(Taro.uploadFile，option) | `null` |
 | mode`v4.1.1 仅支持小程序` | 预览图片的 mode 属性 | string | `aspectFit` |
 

src/packages/__VUE/uploader/index.taro.vue

@@ -136,6 +136,10 @@ export default create({
     disabled: { type: Boolean, default: false },
     autoUpload: { type: Boolean, default: true },
     maxDuration: { type: Number, default: 10 },
+    beforeUpload: {
+      type: Function,
+      default: null
+    },
     beforeXhrUpload: {
       type: Function,
       default: null
@@ -235,7 +239,18 @@ export default create({
       // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
       const { tempFiles } = res
       const _files: Taro.chooseMedia.ChooseMedia[] = filterFiles<Taro.chooseMedia.ChooseMedia>(tempFiles)
-      readFile<Taro.chooseMedia.ChooseMedia>(_files)
+
+      if (props.beforeUpload) {
+        props.beforeUpload(new Array<File>().slice.call(_files)).then(
+          (f: Array<File> | boolean) => {
+            const _files: File[] = filterFiles(new Array<File>().slice.call(f))
+            if (!_files.length) res.tempFiles = []
+            readFile(_files)
+          }
+        )
+      } else {
+        readFile(_files)
+      }
       emit('change', {
         fileList: fileList.value
       })
@@ -244,7 +259,17 @@ export default create({
       // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
       const { tempFiles } = res
       const _files: Taro.chooseImage.ImageFile[] = filterFiles<Taro.chooseImage.ImageFile>(tempFiles)
-      readFile<Taro.chooseImage.ImageFile>(_files)
+      if (props.beforeUpload) {
+        props.beforeUpload(new Array<File>().slice.call(_files)).then(
+          (f: Array<File> | boolean) => {
+            const _files: File[] = filterFiles(new Array<File>().slice.call(f))
+            if (!_files.length) res.tempFiles = []
+            readFile(_files)
+          }
+        )
+      } else {
+        readFile(_files)
+      }
       emit('change', {
         fileList: fileList.value
       })