更新记录

1.0.0（2023-06-26） 下载此版本

首次提交

平台兼容性

uni-app

lmk-uploadCompress

1.引入

import lmkUploadCompress from '../../uni_modules/lmk-uploadCompress/components/lmk-uploadCompress/lmk-uploadCompress.vue'

2.注册

components:{
    lmkUploadCompress
},

3.使用

<lmk-upload-compress :max="19" v-model="fileData" mediaType="all" :chooseNum="1"
    :sourceType="['album','camera']" :compress="false" :quality="80" :formData="formData" :remove="true"
    @uploadSuccess="uploadSuccess" @imgDelete="deleteFile" @uploadFail="uploadFail"
    :action="uploadUrl"></lmk-upload-compress>

4.方法

methods:{
    // 上传成功
    uploadSuccess(res, fileType) { //上传成功
        /****************
        因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
        ***************/
        //files:0->图片，1-》视频
        console.log(res);
    },
    //删除
    deleteFile(e) {
        console.log('删除',e.detail)
    },
     //上传失败
    uploadFail(err) {
        uni.showToast({
            title: '上传失败',
            icon: 'none'
        })
    },
}

5.传参说明

props:{
    max: { //展示图片最大值
        type: Number,
        default: 1,
    },
    chooseNum: { //选择图片数
        type: Number,
        default: 9,
    },
    name: { //发到后台的文件参数名
        type: String,
        default: 'file',
    },
    dataType: { //v-model的数据结构类型
        type: Number,
        default: 0, // 0: ['http://xxxx.jpg','http://xxxx.jpg'] 1:[{type:0,url:'http://xxxx.jpg'}]  type 0 图片 1 视频 url 文件地址 此类型是为了给没有文件后缀的状况使用的
    },
    remove: { //是否展示删除按钮
        type: Boolean,
        default: true,
    },
    add: { //是否展示添加按钮
        type: Boolean,
        default: true,
    },
    disabled: { //是否禁用
        type: Boolean,
        default: false,
    },
    sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
        type: Array,
        default: () => ['album', 'camera'],
    },
    action: { //上传地址 如需使用uniCloud服务，设置为uniCloud即可
        type: String,
        default: '',
    },
    headers: { //上传的请求头部
        type: Object,
        default: () => {},
    },
    formData: { //HTTP 请求中其他额外的 form data
        type: Object,
        default: () => {},
    },
    compress: { //是否需要压缩
        type: Boolean,
        default: true,
    },
    quality: { //压缩质量，范围0～100
        type: Number,
        default: 80,
    },
    // #ifndef VUE3
    value: { //受控图片列表
        type: Array,
        default: () => [],
    },
    // #endif
    // #ifdef VUE3
    modelValue: { //受控图片列表
        type: Array,
        default: () => [],
    },
    // #endif
    uploadSuccess: {
        default: (res,file) => {
            return {
                success: false,
                url: ''
            }
        },
    },
    mediaType: { //文件类型 image/video/all
        type: String,
        default: 'image',
    },
    maxDuration: { //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用)
        type: Number,
        default: 60,
    },
    camera: { //'front'、'back'，默认'back'(只针对拍摄视频有用)
        type: String,
        default: 'back',
    },
    appVideoPoster: { //app端视频展示封面 只对app有效
        type: String,
        default: '',
    },
}