Mojo UI

Appearance

Upload 上传 ​

MoUpload 用于文件选择、拖拽上传、图片裁剪和自定义上传请求。默认不会自动上传，适合先选择文件，再由业务主动提交。

基础用法 ​

Light
拖拽文件到这里
或点击上传
支持 PNG/JPG/WebP，最大 10MB

尚未选择文件

Dark
拖拽文件到这里
或点击上传
支持 PNG/JPG/WebP，最大 10MB

尚未选择文件

vue
<MoUpload
  accept="image/png,image/jpeg,image/webp"
  :limit="1"
  :max-size="10"
  hint="支持 PNG/JPG/WebP，最大 10MB"
/>

多文件 ​

Light
拖拽文件到这里
或点击上传
最多选择 4 个文件，单个不超过 20MB
Dark
拖拽文件到这里
或点击上传
最多选择 4 个文件，单个不超过 20MB
vue
<MoUpload multiple :limit="4" :max-size="20" />

手动上传 ​

Light
拖拽文件到这里
或点击上传
选择文件后点击按钮上传
Dark
拖拽文件到这里
或点击上传
选择文件后点击按钮上传
vue
<script setup lang="ts">
import { ref } from "vue";

const uploadRef = ref();

function submitUpload() {
  uploadRef.value?.submit();
}
</script>

<template>
  <MoUpload ref="uploadRef" action="/api/upload" />
  <MoButton @click="submitUpload">开始上传</MoButton>
</template>

自动上传和自定义请求 ​

Light
拖拽文件到这里
或点击上传
选择后自动调用 request
Dark
拖拽文件到这里
或点击上传
选择后自动调用 request
ts
async function customUpload({ file, onProgress }) {
  const formData = new FormData();
  formData.append("file", file);

  await axios.post("/api/upload", formData, {
    onUploadProgress(event) {
      if (event.total) {
        onProgress((event.loaded / event.total) * 100);
      }
    }
  });
}
vue
<MoUpload auto-upload :request="customUpload" />

自定义拖拽区 ​

Light
上传头像点击或拖入图片文件
拖拽文件到这里
或点击上传
自定义内容
Dark
上传头像点击或拖入图片文件
拖拽文件到这里
或点击上传
自定义内容
vue
<MoUpload>
  <template #dropzone>
    <div>点击或拖入图片文件</div>
  </template>
</MoUpload>

图片裁剪 ​

Light
拖拽文件到这里
或点击上传
上传后进入圆形裁剪
Dark
拖拽文件到这里
或点击上传
上传后进入矩形裁剪
vue
<MoUpload crop crop-shape="circle" :crop-size="96" />
<MoUpload crop crop-shape="rect" :crop-width="320" :crop-height="180" />

上传 SDK ​

ts
import { uploadFile } from "@yymojo-tec/mojo-ui";

await uploadFile({
  file,
  action: "/api/upload",
  headers: { Authorization: `Bearer ${token}` },
  data: { scene: "avatar" },
  onProgress(percent) {
    console.log(percent);
  }
});

API ​

属性说明类型默认值
theme主题light | darklight
accept原生文件类型限制string""
multiple是否多选booleanfalse
limit文件数量上限number1
maxSize单文件最大体积，单位 MBnumber10
hint辅助说明stringPNG/JPG/WebP，最大 10MB
autoUpload选择后是否自动上传booleanfalse
action上传地址string""
method请求方法stringPOST
name文件字段名stringfile
data附加数据object | FormData | function-
headers请求头object | function-
withCredentials是否携带凭据booleanfalse
request自定义上传函数UploadRequest-
crop是否启用裁剪booleanfalse
manualCrop是否手动确认裁剪booleantrue
cropShape裁剪形状square | circle | rectsquare
cropSize方形/圆形裁剪尺寸number | string64
cropWidth矩形裁剪宽度number | string-
cropHeight矩形裁剪高度number | string-

Events ​

事件说明回调参数
change文件列表变化时触发files
success单个文件上传成功时触发file, response
error单个文件上传失败时触发file
remove文件被移除时触发file

Exposes ​

方法说明
files当前文件列表
upload(file)上传指定文件项
submit()上传所有 ready/error 状态文件
clearFiles()清空文件列表

Slots ​

插槽说明
dropzone自定义拖拽上传区域