更新记录

1.0.0（2022-03-07）

上传地址和token请自行更改为自己的地址信息，首次提交。有问题随时反馈！

平台兼容性

自行下载插件，使用自己i项目的地址和token进行测试！！！

该组件为视频和图片上传为一体的上传组件，解决视频上传后，无法显示视频第一帧问题，和视频组件层级问题，

属性参数：

事件

demo

<template>
  <view class="content">
    <xfx-image-upload
      :max="6"
      :chooseNum="6"
      v-model="mobileData"
      @uploadSuccess="ceshiUploadSuccess"
      @chooseSuccess="chooseMobile"
      @uploadFail="errorUpload"
      @imgDelete="delMobile"
      mediaType="all"
      :action="urlConfig"
    ></xfx-image-upload>
  </view>
</template>
<style>
</style>
<script>
import xfxImageUpload from "@/components/xfx-image-upload/xfx-image-upload.vue";
export default {
  data() {
    return {
      urlConfig: "", //上传的地址,
      mobileData: [], //上传成功的数组
    };
  },
  components: { xfxImageUpload },
  onLoad() {},
  methods: {
      //上传成功
    ceshiUploadSuccess(res) {
      console.log(res);
      /****************
      因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
        ***************/
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        this.mobileData.push(_res.message);
      }
    },
    // 未配置地址
    chooseMobile(res) {
      console.log(res);
    },
    //删除
    delMobile(del, tempFilePaths) {
      this.mobileData = del.tempFilePaths;
      console.log(this.mobileData);
    },
    // 上传失败
    errorUpload(res) {},
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

备注

1. 目前当文件大于1MB时进行压缩，如果需要调整，大家就手动改代码吧~
2. 关于上传完成回显的问题，因为上传返回的结构都不一致，所以这部分代码需要开发者自己完成，只要将获取到的地址，添加到组件绑定的数组对象里即可
3. 上传成功的图片或视频，均可进行播放或放大查看