文档

Appearance

上传 ​

文件上传示例 ​

​

https://digi-dev.iwxh5.com/_adm/#/demo/ossUpload/index?accessid=37

使用文档说明 ​

一、文件上传 ​

版本说明 ​

时间修改人备注版本
2022-12-05LZJ初始化文档1.0.0
2023-01-06LZJ处理antd进度条1.0.1
2023-01-18LZJ图片上传新增图片尺寸校验1.0.2

使用说明 ​

1. 使用插件阿里插件  ali-oss ​

npm安装

 npm install ali-oss

2. 引入js ​

  • 根据使用版本引入js
import useOss from "@/libs/common/oss/useAliOss.1.0.1.js";

3.使用 ​

const objOss = new useOss();
objOss.init(config).then(() => {
    objOss.uploadFile({
        mode: 'img',
        file: file, //file对象
        progress: (p) => {
        }
    }).then(res => {
    })
})

init方法options ​

参数说明类型默认值
config配置Object见下表， init方法options.config
data获取oss配置参数Object--

init方法options.config ​

参数说明类型默认值
fliePath文件上传路径Stringoss配置的module + 当前年月日（示例：module/2022/12/05）
folder文件夹，该字段影响fliePath的默认值（示例：module + folder/2022/12/05）String--
multipartUploadSize文件大小大于该值使用分片分片上传Number100
multipartParallel并发上传的分片数量Number4
multipartPartSize分片大小Number1
  • 注意folder前后不要有‘/’

uploadFile方法options ​

参数说明类型默认值版本
fileFile对象，必填File--1.0.0
mode上传类型： img 、video、doc、fileStringfile1.0.0
fileSize文件大小Number51.0.0
dimensionsmode为img时有效，图片上传时校验尺寸Object1.0.2
progress上传进度回调Function--1.0.0
onProgress直接处理进度展示，仅antd上传组件有效Function--1.0.1
  • dimensions支持设置ratio 、maxWidth 、maxHeight： ratio ：宽高比(即宽度除以高度)，如1.500（目前只支持小数点后3位），默认为0不做验证； maxWidth ：最大宽度，默认为0不做验证； maxHeight：最大高度，默认为0不做验证；

二、图片上传组件 ​

版本说明 ​

时间修改人备注版本
2022-01-06LZJ初始化文档1.0.0

项目示例 ​

svn://39.107.13.238:12580/base_digi 位置：/src/pages/demo/ossUpload/index

使用示例 ​

  1. 引入组件
import OssUploadImg from '@/libs/common/oss/upload'
  1. 使用

template ​

<OssUploadImg v-model:fileList="objForm.oss_imgs" :config="{mode:'img',maxCount:1 }"
              @success="onUplaodSeccess($event,'oss_imgs')"></OssUploadImg>

js ​

const formConf = reactive({
    // 表单对应的字段名
    objForm: {
        oss_imgs: []
    },
    // 校验规则
    rules: {
        oss_imgs: [{
            required: false
        }]
    },
    onUplaodSeccess: (res,key) => {
        let fileList = formConf.objForm[key];
        fileList[fileList.length - 1].thumbUrl = res.filename_url;
        //filename为图片短链接，保存时用
        fileList[fileList.length - 1].filename = res.filename;
    }
})

config ​

参数说明类型默认值版本
maxCount文件数量String11.0.0
name文件名称String'img'1.0.0
openCut是否开启裁剪，配合裁剪组件使用Number501.0.0
  • 组件调用的是useOss的uploadFile方法上传，config会作为uploadFile方法的options，也就是说除了上表的参数也支持uploadFile方法的option。
  • 裁剪示例位置：/src/pages/demo/ossUpload/index