图片视频上传组件参数

Dome

<template>
    <view>
    <view >配置上传路径，通过@uploadSuccess事件的</view>
        <image-upload 
        :max="3" 
        v-model="ceshiData" 
        @uploadSuccess="ceshiUploadSuccess" 
        action="http://XXX"></image-upload>
        <view >配置上传路径，通过:uploadSuccess属性的</view>
        <image-upload
        :max="3" 
        v-model="ceshiData1" 
        :uploadSuccess="zidingyiSuccess" 
        action="http://XXX"></image-upload>
    </view>
    <view>使用uniCloud服务</view>
    <image-upload  :sourceType="['camera','album']" mediaType="all"  :max="9" v-model="uniCloudData"
        action="uniCloud">
    </image-upload>
</template>
<script>
    import ImageUpload from '@/components/image-upload/image-upload.vue'
    export default {
        data() {
            return {
                ceshiData: [],
                ceshiData1: [],
                uniCloudData:[],
            }
        },
        onLoad() {

        },
        components: {
            ImageUpload,
        },
        methods: {
            ceshiUploadSuccess(res) { //上传成功
                /****************
                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
                ***************/
                var _res = JSON.parse(res.data);
                if (_res.code == 200) {
                    this.ceshiData.push(_res.result);
                }
                /*******************************/
            },
            zidingyiSuccess(res){
                var _res = JSON.parse(res.data);
                if (_res.code == 200) {
                    return {
                        success: true,
                        url: 'http://XXX' + _res.result
                    }
                } else {
                    return {
                        success: false,
                        url: ''
                    }
                }

            },
        }
    }
</script>

属性说明

属性名	类型	默认值	说明
value	Array	[]	受控图片列表
max	Number	1	展示图片最大值
chooseNum	Number	1	选择图片数
name	String	file	发到后台的文件参数名
dataType	Number	0	v-model的数据结构类型 0:格式为['xxxx.jpg','http://xxxx.jpg']…'}] 【type 0: 图片 1:视频 url:文件地址 此类型是为了给没有文件后缀的状况使用的】
remove	Boolean	true	是否展示删除按钮
add	Boolean	true	是否展示添加按钮
disabled	Boolean	false	是否禁用
action	String	''	上传地址 如需使用uniCloud服务，设置为uniCloud即可
sourceType	Array	['album', 'camera']	选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
compress	Boolean	true	是否需要压缩
quality	Number	80	压缩质量，范围0～100
headers	Object	{}	上传的请求头部
formData	Object	{}	HTTP 请求中其他额外的 form data
uploadSuccess	(res) =>{success:false,url:''}	{success:false,url:''}	解析上传返回信息 返回展示路径{success:true,url:'解析的路径'},若失败或解析出问题返回success:false，此属性和事件里面的uploadSuccess为两种方式，选择一种即可
mediaType	String	image	文件类型 image/video/all
maxDuration	Number	60	拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用) APP平台 1.9.7+(iOS支持，Android取决于ROM的拍照组件是否实现此功能，如果没实现此功能则忽略此属性。) 微信小程序、百度小程序
camera	String	back	镜头方向 'front'、'back'，默认'back'(只针对拍摄视频有用)
appVideoPoster	String	默认封面图	app端视频展示封面 只对app有效

事件

事件名称	说明	回调参数
uploadSuccess	上传成功事件	Function(res) fileType 文件类型 0: 图片 1:视频
uploadFail	上传失败事件	Function(err)
chooseSuccess	选择图片后触发（当不配置action参数时，触发此事件）	Function(tempFilePaths,type) tempFilePaths文件路径 type 0:图片 1:视频
imgDelete	删除图片后触发【del:返回删除的图片路径，tempFilePaths:返回删除之后的图片数组】（如果dataType==1 del会变成返回删除的图片对象 tempFilePaths中item的结构同理）	Function({del:del,tempFilePaths:tempFilePaths})