更新记录

1.2.5（2021-08-13）

修改问题

1.2.4（2021-08-12）

只用于提交表单功能，后期可根据自行回显。

1.2.3（2021-08-12）

修改count计数，说明文档修改

平台兼容性

上传视频和图片组件

可以控制每种的数量，视频长度等。

后端上传服务需要回调的参数类型

示例：
  code: 200
  data: {
    fileExtName: "png"
    fileId: "5,019ed0fda59c"
    fileName: "xxxx.png"
    fileSize: 20738
    fileUrl: "http://10.10.77.72:9888/5,019ed0fda59c"
  }
  message: ""
  success: true
  timestamp: 1628130248992
  totalCount: null

调用示例

    <template>
        <div class=''>
            <UploadFile @moveFiles="moveFiles" maxDuration="15" imageCount="3" videoCount="3" @onSuccess="onSuccess" uploadUrl="/upload"></UploadFile>
        </div>
    </template>

    <script>
    import UploadFile from './uploadFile.vue'
    export default {
        data() {
            return {

            };
        },
        watch: {},
        components:{
            UploadFile
        },
        methods: {
            onSuccess(data){ }, //上传图片成功回调
            moveFiles(index, data){ }//删除上传图片
        },
    }
    </script>

    <style lang='scss' scoped>

    </style>

支持图片和视频预览

目前自己只在微信小程序使用

  this.srcImage 包括 图片
  this.srcVideo 包括 视频和封面（videoUrl，imgUrl）
    onSuccess(data){  //上传图片成功回调
    this.srcImage = []
    this.srcVideo = []
    data.forEach((item,index) =>{
            if(item.type == 'image'){
                this.srcImage.push(item.src)
            }
            else if(item.type == 'video'){
                this.srcVideo.push({imgUrl:item.src,videoUrl:item.videoSrc})
            }
        })
    },
  moveFiles(index, data){ //删除上传图片
    this.srcImage = []
    this.srcVideo = []
    data.forEach((item,index) =>{
      if(item.type == 'image'){
        this.srcImage.push(item.src)
      }
      else if(item.type == 'video'){
        this.srcVideo.push({imgUrl:item.src,videoUrl:item.videoSrc})
      }
    })
    },