QinUi

# Upload 上传

统一封装

# 基础用法

<template>
  <qinui-upload
    :headers="theHeaders"
    :url="theUrl"
    :extData="{
      topic: 'shop',
    }"
    v-model="theFileList1"
    v-model:fileIds="theFileId1"
  />
</template>

<script lang="ts" setup>
  import { onLoad } from '@fe6/qinjs-app';
  import { ref, shallowRef } from 'vue';

  const theUrl = shallowRef(
    'https://api.test.fanzhi.cn/common/upload/images/resource',
  );
  const theHeaders = ref({
    Authorization:
      'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50X2lkIjozNiwiY291bnRyeV9jb2RlIjoiODYiLCJtb2JpbGUiOiIxMzAxMTgwNTgwMCIsImp3dF9zY2VuZSI6ImJfd2FpdHN0YWZmX3d4YXBwIiwiaXNzIjoicGhwZXI2NjYvand0IiwianRpIjoiYl93YWl0c3RhZmZfd3hhcHBfNjYzYjI5MzVmMzgxMzUuMTEwMDQ1MDIiLCJpYXQiOjE3MTUxNTMyMDUsIm5iZiI6MTcxNTE1MzIwNSwiZXhwIjoxNzE3NzQ1MjA1fQ.nOvaPU2LKRrYAgEjVlRIHM_1YOjPklFTYyj01Gguul0',
    'GW-Request-Scene-Type': 'sdp_wxapp',
    'GW-Session-Id': 'cr122udq',
  });
  const theFileList1 = ref<any[]>([]);
  const theFileId1 = ref<any[]>([]);
</script>

# 渲染数据

<template>
  <qinui-upload
    :headers="theHeaders"
    :url="theUrl"
    :extData="{
      topic: 'shop',
    }"
    v-model="theFileList"
    v-model:fileIds="theFileId"
  />
</template>

<script lang="ts" setup>
  import { onLoad } from '@fe6/qinjs-app';
  import { ref, shallowRef } from 'vue';

  const theUrl = shallowRef(
    'https://api.test.fanzhi.cn/common/upload/images/resource',
  );
  const theHeaders = ref({
    Authorization:
      'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50X2lkIjozNiwiY291bnRyeV9jb2RlIjoiODYiLCJtb2JpbGUiOiIxMzAxMTgwNTgwMCIsImp3dF9zY2VuZSI6ImJfd2FpdHN0YWZmX3d4YXBwIiwiaXNzIjoicGhwZXI2NjYvand0IiwianRpIjoiYl93YWl0c3RhZmZfd3hhcHBfNjYzYjI5MzVmMzgxMzUuMTEwMDQ1MDIiLCJpYXQiOjE3MTUxNTMyMDUsIm5iZiI6MTcxNTE1MzIwNSwiZXhwIjoxNzE3NzQ1MjA1fQ.nOvaPU2LKRrYAgEjVlRIHM_1YOjPklFTYyj01Gguul0',
    'GW-Request-Scene-Type': 'sdp_wxapp',
    'GW-Session-Id': 'cr122udq',
  });
  const theFileList = ref<any[]>([]);
  const theFileId = ref<any[]>([]);
  onLoad(() => {
    setTimeout(() => {
      theFileList.value = [
        'https://test-oss.test.fanzhi.cn/images/82/61/a261a69a252fd117d9369b2e39d2.jpg',
      ];
      theFileId.value = [236250];
    }, 500);
  });
</script>

# 多个

设置 :multiple="true" :maxlength="4"

<template>
  <qinui-upload
    :headers="theHeaders"
    :url="theUrl"
    :extData="{
      topic: 'shop',
    }"
    :multiple="true"
    :maxlength="4"
    v-model="theFileList"
    v-model:fileIds="theFileId"
  />
</template>

<script lang="ts" setup>
  import { onLoad } from '@fe6/qinjs-app';
  import { ref, shallowRef } from 'vue';

  const theUrl = shallowRef(
    'https://api.test.fanzhi.cn/common/upload/images/resource',
  );
  const theHeaders = ref({
    Authorization:
      'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50X2lkIjozNiwiY291bnRyeV9jb2RlIjoiODYiLCJtb2JpbGUiOiIxMzAxMTgwNTgwMCIsImp3dF9zY2VuZSI6ImJfd2FpdHN0YWZmX3d4YXBwIiwiaXNzIjoicGhwZXI2NjYvand0IiwianRpIjoiYl93YWl0c3RhZmZfd3hhcHBfNjYzYjI5MzVmMzgxMzUuMTEwMDQ1MDIiLCJpYXQiOjE3MTUxNTMyMDUsIm5iZiI6MTcxNTE1MzIwNSwiZXhwIjoxNzE3NzQ1MjA1fQ.nOvaPU2LKRrYAgEjVlRIHM_1YOjPklFTYyj01Gguul0',
    'GW-Request-Scene-Type': 'sdp_wxapp',
    'GW-Session-Id': 'cr122udq',
  });
  const theFileList = ref<any[]>([]);
  const theFileId = ref<any[]>([]);
  onLoad(() => {
    setTimeout(() => {
      theFileList.value = [
        'https://test-oss.test.fanzhi.cn/images/82/61/a261a69a252fd117d9369b2e39d2.jpg',
      ];
      theFileId.value = [236250];
    }, 500);
  });
</script>

# API

# Props

参数 说明 类型 默认值 可选值 版本
headers 请求头部 Object - -
width 盒子的宽度 String 196rpx -
height 盒子的高度 String 196rpx -
radius 盒子的圆角 String 0 1.15.0+
url 上传接口地址 String - -
extData 其他接口参数 Object - -
multiple 是否多个 Boolean false false | true -
maxlength 最多几个 Number Number.MAX_VALUE -
maxSize 上传文件大小，单位 byte Number Number.MAX_VALUE -
before 上传之前触发的方法 Function - - -
diyInnerStyle 自定义内部样式，如：设置背景色等样式 String - - 1.15.0+
diyStyle 自定义外部样式，如：设置边框等样式 String - - -

# Events

事件名 说明 回调参数
@success 上传成功 -
@error 上传失败 -
@start 上传开始 -
@progress 上传中 -
@delete 删除 -
@clickPreview 点击预览时触发 -

← ActionSheetService 客服操作菜单 →