Upload 上传

用于表单中图片或视频上传的场景；

支持同时上传视频和图片

基本使用

图片上传

<com-upload v-model="imgs"></com-upload>

<script>
data() {
    return {
        imgs: [], //数组或者字符串类型
    }
}
</script>

视频上传

<com-upload mode="video" v-model="videos"></com-upload>

<script>
data() {
    return {
        videos: [], //数组或者字符串类型
    }
}
</script>

同时支持图片和视频上传

<com-upload mode="mixin" v-model="list" 
    @success="uploadSuccess" @remove="removeFile"
></com-upload>

<script>
data() {
    return {
        list: [], //只支持数组类型
    }
},

methods: {

    uploadSuccess(e){
        const { index, mode, url } = e
        if(mode == 'image'){
            // 上传的是图片
        }else if(mode == 'video'){
            // 上传的是视频
        }
    },

    removeFile(){
        const { index, mode, success } = e
		this.list.splice(index, 1)
    },

}
</script>

显示提示文本

<com-upload v-model="imgs" text="点击上传"></com-upload>

自定义默认展示内容

<com-upload v-model="idcard" :limit="1" width="188" height="178">
    <com-image src="/static/images/idcard.png" width="100%" height="128"></com-image>
    <com-button type="main" width="100%" height="50">拍摄正面</com-button>
</com-upload>

设置预制图片

表单需要修改上传的图片时，可能要先将图片回显

(1) 非混合内容上传，可以直接显示v-model绑定的图片

<!-- 设置预置图片 (key值作用是异步赋值时重新渲染组件，数组类型可以绑定长度imgList.length) --> 
<com-upload v-model="imgList" :key="imgList"></com-upload>

<!-- 设置预置视频 (key值作用是异步赋值时重新渲染组件，数组类型可以绑定长度videoList.length)--> 
<com-upload mode="video" v-model="videoList" :key="videoList"></com-upload>

<script>
data() {
    return {
        imgList: "",
		videoList: "",
    }
},

onReady() {
    // 模拟异步赋值
    setTimeout(()=>{
        this.imgList = '/static/images/flower.webp'
        this.videoList = '/static/video/demo.mp4'
    }, 500)
},
</script>

(2) 混合内容上传；需要手动调用setPreview方法设置预置图片

<com-upload ref="upload" mode="mixin" v-model="list"></com-upload>

<script>
data() {
    return {
        list: [], //只支持数组类型
    }
},

methods: {

    setPreview(){
        let list = []
        list.push({
            url: '/static/images/logo.png',
            mode: 'image'
        })
        list.push({
            url: '/static/video/demo.mp4',
            mode: 'video'
        })
        this.$refs['upload'].setPreview(list)
    },
}
</script>

组件配置

此组件为深度封装，需要根据项目情况对上传接口进行配置

文件目录：/components/com-upload/com-upload.vue

(1) 配置上传地址

修改props中url的默认值即可

(2) 配置上传成功条件，获取接口返回的网络路径

修改methods中uploadSuccess方法

// 上传成功, res参数为上传接口的响应参数
uploadSuccess(res, context){
    // 修改此值对应的响应字段即可
    let url = res.data
},

API

Props

属性名	说明	类型	必填	默认值
value	文件url列表	String / Array	false	-
mode	上传模式 image/video	String / Number	false	image
url	上传地址	String	false	-
formData	上传携带的额外参数	Object	false	{}
auto	是否自动上传	Boolean	false	true
limit	最大上传数目	Number	false	9
sourceType	album 从相册选视频，camera 使用相机拍摄	Array	false	["album","camera"]
text	提示文字	String	false	-
width	组件宽度	Number / String	false	180
height	组件高度	String	false	140
clearable	是否可移除	Boolean	false	true

Events

事件	说明	回调参数
success	上传成功
fail	上传失败
remove	移除

通过事件对象可以获得上传的上下文对象： index字段表示下标值； mode字段代表当前上传的模式：image为图片，video为视频