BehaviorsUI

Appearance

Upload 上传 ​

场景-多图上传 ​

html
<be-upload
  v-model="imageList"
  ref="uploaderRef"
  :auto-upload="false"
  :max-count="9"
  :action="action"
  :header="header"
  :hooks="{
    onResponse: onUploadResponse
  }"
>
  <template #default="{ fileList, chooseImage, previewImage, remove }">
    <view class="file-list">
      <view v-if="fileList.length < 9" class="add-btn" @click="chooseImage">+</view>
      <view class="file-item" v-for="file in fileList" :key="file.uuid">
        <view class="remove-btn" @click="remove(file)">×</view>
        <image :src="file.url" mode="scaleToFill" @click="previewImage(file)" />
      </view>
    </view>
  </template>
</be-upload>
<be-button class="upload-btn" hover @click="upload">上传</be-button>
ts
import { ref } from 'vue';

const imageList = ref<string[]>([]);
const uploaderRef = ref();
const action = '/'; // 上传接口地址
const header = {
  Authorization: 'token' // token鉴权
};

const onUploadResponse = (res: any) => {
  return res.data.url; // 上传接口响应中取到图片url
};

const upload = async () => {
  if (uploaderRef.value.fileList.length === 0) {
    console.log('请添加图片');
    return;
  }
  await uploaderRef.value.upload();
};
scss
.file-list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .add-btn,
  .file-item {
    width: calc((750rpx - 32px - 32px) / 3);
    height: calc((750rpx - 32px - 32px) / 3);
    border-radius: 6px;
    margin-top: 16px;
    margin-right: 16px;
    background-color: #eef1f9;
  }

  .add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: #999999;
    transition: all 0.2s;

    &:active {
      background-color: darken(#eef1f9, 5%);
    }
  }

  .file-item {
    position: relative;

    &:nth-child(3n) {
      margin-right: 0px;
    }

    .remove-btn {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fa3636;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 1;
    }

    image {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
}

.upload-btn {
  width: 100%;
  margin-top: 16px;
  height: 36px;
  border-radius: 10px;
  background-color: #4a68cc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
}

API ​

Props ​

属性名说明类型默认值
modelValue(v-model)当前上传成功的文件 url 列表string[][]
defaultFileList默认已上传的文件列表，初始化时会自动更新 v-model 值Array<{ type: FileType, name: string, url: string }>[]
chooseImageConfig选择图片配置ChooseImageConfig-
chooseVideoConfig选择视频配置ChooseVideoConfig-
autoUpload选择文件后是否自动上传booleantrue
maxCount可上传文件数量限制numberInfinity
action上传接口地址string-
header上传请求头部object-
formData上传请求额外参数object | FormDataFactory-
hooks上传钩子函数，必须有 onResponse 钩子函数UploadHooks{ onResponse: (res: any) => res.url }

Slots ​

插槽名说明slot props默认值
default上传视图。props 详细说明参见下方。{ fileList, chooseImage, chooseVideo, previewImage, remove, clear, upload, reUpload }无

Readonly Data ​

数据名说明类型
fileList文件列表Ref<FileList>

Methods ​

方法名说明参数
chooseImage选择图片(config?: ChooseImageConfig) => void
chooseVideo选择视频(config?: ChooseVideoConfig) => void
previewImage预览图片(file: UploadFile) => void
remove从列表移除文件(file: UploadFile) => void
clear清空文件列表() => void
upload上传文件。file参数不传则上传所有文件。(file?: UploadFile) => Promise<Array<{ file: UploadFile, result: any }>>
reUpload重新上传失败状态的文件。file参数不传则上传所有失败状态的文件。(file?: UploadFile) => Promise<Array<{ file: UploadFile, result: any }>>

Types ​

类型名值说明
FileType'image' | 'video'-
ChooseImageConfigPick<UniNamespace.ChooseImageOptions, 'count' | 'sizeType' | 'sourceType'> & { maxSize?: number }UniNamespace.ChooseImageOptions：uni.chooseImage 的参数。maxSize：选择图片最大限制（单位 KB），默认 10M
ChooseVideoConfigPick<UniNamespace.ChooseVideoOptions, 'sourceType' | 'compressed' | 'maxDuration' | 'camera'> & { maxSize?: number }UniNamespace.ChooseVideoOptions：uni.chooseVideo 的参数。maxSize：选择视频最大限制（单位 KB），默认 100M
UploadHooks{ onResponse: ResponseHook, onUploaded?: UploadedHook, onChooseComplete?: ChooseCompleteHook, onChooseFail?: ChooseFailHook, onOversize?: OversizeHook, onOverCount?: OverCountHook }-
ResponseHook(res: any) => string | null | undefined上传接口请求成功（状态码 200），每个文件会触发一次。参数res为接口返回的数据，函数需返回文件的 url，返回值为空则表示上传失败
UploadedHook(results: any[]) => void全部文件上传完毕（包括失败）
ChooseCompleteHook(res: any) => void文件选择完成
ChooseFailHook(error: any) => void文件选择失败
OversizeHook(error: { type: FileType }) => void文件大小超出限制
OverCountHook() => void文件数量超出限制
FileListArray<UploadFile>文件列表
UploadFile{ uuid: string, type: FileType, name: string, url: string, status: UploadStatus, progress: number, response?: any }文件对象
UploadStatus'local' |'progress' |'success' |'error'文件状态。local本地 progress上传中 success上传成功 error上传失败
FormDataFactory(file: UploadFile) => object获取 formData 的工厂函数