docs(uploader): add international en-us

src/packages/__VUE/uploader/demo.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="demo bg-w">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-uploader :url="uploadUrl"></nut-uploader>
-    <h2>上传状态</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" @delete="onDelete" maximum="3" multiple>
     </nut-uploader>
-    <h2>基础用法-上传列表展示</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type="list">
-      <nut-button type="success" size="small">上传文件</nut-button>
+      <nut-button type="success" size="small">{{ translate('uploadfile') }}</nut-button>
     </nut-uploader>
-    <h2>自定义上传样式</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-uploader :url="uploadUrl">
-      <nut-button type="success" size="small">上传文件</nut-button>
+      <nut-button type="success" size="small">{{ translate('uploadfile') }}</nut-button>
     </nut-uploader>
-    <h2>自定义上传使用默认进度条</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-uploader :url="uploadUrl" @progress="onProgress">
-      <nut-button type="success" size="small">上传文件</nut-button>
+      <nut-button type="success" size="small">{{ translate('uploadfile') }}</nut-button>
     </nut-uploader>
     <br />
     <nut-progress
@@ -24,30 +24,65 @@
       :status="progressPercentage == 100 ? '' : 'active'"
     >
     </nut-progress>
-    <h2>直接调起摄像头（移动端生效）</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-uploader :url="uploadUrl" capture></nut-uploader>
-    <h2>限制上传数量5个</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-uploader :url="uploadUrl" multiple maximum="5"></nut-uploader>
-    <h2>限制上传大小（每个文件最大不超过 50kb）</h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
-    <h2>图片压缩（在 beforeupload 钩子中处理）</h2>
+    <h2>{{ translate('title8') }}</h2>
     <nut-uploader :url="uploadUrl" multiple :before-upload="beforeUpload"> </nut-uploader>
-    <h2>自定义数据 FormData 、 headers </h2>
+    <h2>{{ translate('title9') }}</h2>
     <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
-    <h2>选中文件后，通过按钮手动执行上传 </h2>
+    <h2>{{ translate('title10') }}</h2>
     <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
     <br />
-    <nut-button type="success" size="small" @click="submitUpload">执行上传</nut-button>
-    <h2>禁用状态</h2>
+    <nut-button type="success" size="small" @click="submitUpload">{{ translate('title11') }}</nut-button>
+    <h2>{{ translate('title12') }}</h2>
     <nut-uploader disabled></nut-uploader>
   </div>
 </template>
 
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { FileItem } from './index.vue';
-const { createDemo } = createComponent('uploader');
+const { createDemo, translate } = createComponent('uploader');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    uploadfile: '上传文件',
+    title1: '上传状态',
+    title2: '基础用法-上传列表展示',
+    title3: '自定义上传样式',
+    title4: '自定义上传使用默认进度条',
+    title5: '直接调起摄像头（移动端生效）',
+    title6: '限制上传数量5个',
+    title7: '限制上传大小（每个文件最大不超过 50kb）',
+    title8: '图片压缩（在 beforeupload 钩子中处理）',
+    title9: '自定义数据 FormData 、 headers ',
+    title10: '选中文件后，通过按钮手动执行上传',
+    title11: '执行上传',
+    title12: '禁用状态'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    uploadfile: 'Upload files',
+    title1: 'Upload status',
+    title2: 'Basic usage - upload list display',
+    title3: 'Custom upload style',
+    title4: 'Custom upload uses default progress bar',
+    title5: 'Directly activate the camera (effective on the mobile terminal)',
+    title6: 'Limit the number of uploads to 5',
+    title7: 'Limit upload size (up to 50kb per file)',
+    title8: 'Image compression (handled in the beforeupload hook)',
+    title9: 'Custom data FormData , headers',
+    title10: 'Once the file is selected, manually perform the upload via the button',
+    title11: 'Perform upload',
+    title12: 'Disabled state'
+  }
+});
 export default createDemo({
   setup() {
     const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts';
@@ -55,26 +90,27 @@ export default createDemo({
     const formData = {
       custom: 'test'
     };
-    const defaultFileList = ref([
+
+    const defaultFileList = computed(() => [
       {
-        name: '文件1.png',
+        name: 'file 1.png',
         url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
         status: 'success',
-        message: '上传成功',
+        message: translate('success'),
         type: 'image'
       },
       {
-        name: '文件2.png',
+        name: 'file 2.png',
         url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
         status: 'error',
-        message: '上传失败',
+        message: translate('error'),
         type: 'image'
       },
       {
-        name: '文件3.png',
+        name: 'file 3.png',
         url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
         status: 'uploading',
-        message: '上传中...',
+        message: translate('uploading'),
         type: 'image'
       }
     ]);
@@ -135,7 +171,8 @@ export default createDemo({
       defaultFileList,
       formData,
       uploadRef,
-      submitUpload
+      submitUpload,
+      translate
     };
   }
 });

src/packages/__VUE/uploader/doc.en-US.md

@@ -0,0 +1,390 @@
+# Uploader
+
+### Intro
+
+Used to upload local pictures or files to the server.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+import { Uploader,Icon,Progress } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Uploader);
+app.use(Icon);
+app.use(Progress);
+
+```
+
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-uploader url="https://xxxx"></nut-uploader>
+</template>
+```
+:::
+### Upload status
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="3" multiple></nut-uploader>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+     const uploadUrl = 'https://xxxxx';
+     const defaultFileList = ref([
+      {
+        name: 'file 1.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'success',
+        message: 'upload success',
+        type: 'image'
+      },
+      {
+        name: 'file 2.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'error',
+        message: 'upload error',
+        type: 'image'
+      },
+      {
+        name: 'file 3.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'uploading',
+        message: 'uploading...',
+        type: 'image'
+      }
+    ]);
+     return {
+      uploadUrl,
+      defaultFileList
+    };
+  }
+}
+</script>
+```
+:::
+### Basic usage - upload list display
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" v-model:file-list="defaultFileList" maximum="10" multiple list-type='list'>
+    <nut-button type="success" size="small">Upload files</nut-button>
+  </nut-uploader>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+     const uploadUrl = 'https://xxxxx';
+     const defaultFileList = ref([
+      {
+        name: 'file 1.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'success',
+        message: 'upload success',
+        type: 'image'
+      },
+      {
+        name: 'file 2.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'error',
+        message: 'upload error',
+        type: 'image'
+      },
+      {
+        name: 'file 3.png',
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+        status: 'uploading',
+        message: 'uploading...',
+        type: 'image'
+      }
+    ]);
+     return {
+      uploadUrl,
+      defaultFileList
+    };
+  }
+}
+</script>
+```
+:::
+
+### Custom upload style
+
+:::demo
+```html
+<template>
+  <nut-uploader url="https://xxxx">
+    <nut-button type="success" size="small">Upload files</nut-button>
+  </nut-uploader>
+</template>
+```
+:::
+### Custom upload uses default progress bar
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" @progress="onProgress">
+    <nut-button type="success" size="small">Upload files</nut-button>
+  </nut-uploader>
+  <br />
+  <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'">
+  </nut-progress>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+     const uploadUrl = 'https://xxxxx';
+     const progressPercentage = ref<string | number>(0);
+     const onProgress = ({ event, options, percentage }: any) => {
+        progressPercentage.value = percentage;
+        console.log('progress 事件触发', percentage);
+     };
+     return {
+      uploadUrl,
+      onProgress,
+      progressPercentage,
+    };
+  }
+}
+</script>
+```
+:::
+
+### Directly activate the camera (effective on the mobile terminal)
+    
+:::demo
+```html
+<template>
+  <nut-uploader url="https://xxxx" capture></nut-uploader>
+</template>
+```
+:::
+### Limit the number of uploads to 5
+
+:::demo
+```html
+<template>
+  <nut-uploader url="https://xxxx" multiple maximum="5"></nut-uploader>
+</template>
+```
+:::
+
+### Limit upload size (up to 50kb per file)
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" multiple :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+      const uploadUrl = 'https://xxxxx';
+      const onOversize = (files: File[]) => {
+        console.log('oversize limit upload size (up to 50kb per file)', files);
+      };
+     return {
+      uploadUrl,
+      onOversize,
+    };
+  }
+}
+</script>
+```
+:::
+### Image compression (handled in the beforeupload hook)
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" multiple :before-upload="beforeUpload"></nut-uploader>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+      const uploadUrl = 'https://xxxxx';
+      const fileToDataURL = (file: Blob): Promise<any> => {
+        return new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = (e) => resolve((e.target as FileReader).result);
+          reader.readAsDataURL(file);
+        });
+      };
+      const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
+        return new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.src = dataURL;
+        });
+      };
+      const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
+        return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality));
+      };
+      const beforeUpload = async (file: File[]) => {
+        let fileName = file[0].name;
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+        const base64 = await fileToDataURL(file[0]);
+        const img = await dataURLToImage(base64);
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        context.clearRect(0, 0, img.width, img.height);
+        context.drawImage(img, 0, 0, img.width, img.height);
+
+        let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
+        const f = await new File([blob], fileName);
+        return [f];
+      };
+     return {
+      uploadUrl,
+      beforeUpload,
+    };
+  }
+}
+</script>
+```
+:::
+
+### Custom data FormData , headers
+
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const uploadUrl = 'https://xxxxx';
+    const formData = {
+      custom: 'test'
+    };
+    return {
+      uploadUrl,
+      formData
+    };
+  }
+}
+</script>
+```
+:::
+### Once the file is selected, manually perform the upload via the button
+    
+:::demo
+```html
+<template>
+  <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
+  <br />
+  <nut-button type="success" size="small" @click="submitUpload">Perform upload</nut-button>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const uploadUrl = 'https://xxxxx';
+    const uploadRef = ref<any>(null);
+    const submitUpload = () => {
+      uploadRef.value.submit();
+    };
+    return {
+      uploadUrl,
+      uploadRef,
+      submitUpload
+    };
+  }
+}
+</script>
+```
+:::
+
+### Disabled state
+
+:::demo
+```html
+<template>
+  <nut-uploader disabled></nut-uploader>
+</template>
+```
+:::
+
+### Prop
+
+| Attribute         | Description                                                                                                                                      | Type                              | Default          |
+|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|------------------|
+| auto-upload       | Whether to upload the file immediately after selecting it, if false, you need to manually execute the ref submit method to upload                | Boolean                           | true             |
+| name              | The name of the `input` tag `name`, the file parameter name sent to the background                                                               | String                            | "file"           |
+| url               | The interface address of the upload server                                                                                                       | String                            | -                |
+| v-model:file-list | List of uploaded files by default                                                                                                                | FileItem[]                        | []               |
+| is-preview        | Whether to display the preview image after the upload is successful                                                                              | Boolean                           | true             |
+| is-deletable      | Whether to display the delete button                                                                                                             | Boolean                           | true             |
+| method            | The http method of upload request                                                                                                                | String                            | "post"           |
+| list-type         | Built-in stylesheets, support for three types: `picture`、`list`                                                                                 | String                            | "picture"        |
+| capture           | Capture, can be set to [camera](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，turn on the camera directly | String                            | false            |
+| maximize          | You can set the maximum upload file size (bytes)                                                                                                 | Number丨String                    | Number.MAX_VALUE |
+| maximum           | File upload limit                                                                                                                                | Number丨String                    | 1                |
+| clear-input       | Whether to clear the `input` content, set to `true` to support repeated selection and upload of the same file                                    | Boolean                           | true             |
+| accept            | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)       | String                            | *                |
+| headers           | Set request headers                                                                                                                              | Object                            | {}               |
+| data              | Uploading extra params or function which can return uploading extra params                                                                       | Object                            | {}               |
+| upload-icon       | Upload area [icon name](#/icon) or image link                                                                                                    | String                            | "photograph"     |
+| upload-icon-size  | Upload area [icon size] (#/icon) size, such as `20px` `2em` `2rem`                                                                               | String or Number                  | -                |
+| xhr-state         | The success status (status) value of the interface response                                                                                      | Number                            | 200              |
+| with-credentials  | The ajax upload with cookie sent                                                                                                                 | Boolean                           | false            |
+| multiple          | Whether to support multiple file selection                                                                                                       | Boolean                           | false            |
+| disabled          | Whether to disable file upload                                                                                                                   | Boolean                           | false            |
+| timeout           | timeout, in milliseconds                                                                                                                         | Number丨String                    | 1000 * 30        |
+| before-upload     | Hook before reading the file, return false to stop reading the file, can return Promise                                                          | Function                          | null             |
+| before-delete     | Hook before delete the file, return false to stop reading the file, can return Promise                                                           | Function(file): boolean 丨Promise | -                |
+
+
+
+### FileItem
+
+| Attribute | Description                                                 | Default                         |
+|-----------|-------------------------------------------------------------|---------------------------------|
+| status    | File status value, optional 'ready,uploading,success,error' | "ready"                         |
+| uid       | Unique ID of the file                                       | new Date().getTime().toString() |
+| name      | File name                                                   | ""                              |
+| url       | File path                                                   | ""                              |
+| type      | File type                                                   | "image/jpeg"                    |
+| formData  | Upload the required data                                    | new FormData()                  |
+
+### Event
+
+| Event           | Description                                              | Arguments                      |
+|-----------------|----------------------------------------------------------|--------------------------------|
+| start           | File upload starts                                       | options                        |
+| progress        | The progress of the file upload                          | {event,option,percentage}      |
+| oversize        | Triggered when the file size exceeds the limit           | files                          |
+| success         | Uploaded successfully                                    | {responseText,option,fileItem} |
+| failure         | Upload failed                                            | {responseText,option,fileItem} |
+| change          | The state when the uploaded file changes                 | {fileList,event}               |
+| delete          | File delete event                                        | {files,fileList,index}         |
+| file-item-click | Click to trigger after the file is uploaded successfully | {fileItem}                     |
+
+### Methods
+
+Use [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) to get Uploader instance and call instance methods.
+
+| Name             | Description                                                                                 | Arguments | Return value |
+|------------------|---------------------------------------------------------------------------------------------|-----------|--------------|
+| submit           | Manual upload mode, perform upload operation                                                | -         | -            |
+| clearUploadQueue | Empty the selected file queue (this method is generally used when uploading in manual mode) | -         | -            |