vant上传音视频附件并且回显功能

fileUploader.vue组件

<template>
  <div>
    <van-uploader accept="avi , mp3,flv , mpg , mpeg , mpe , m1v , m2v , mpv2 , mp2v , dat , ts , tp , tpr , pva , pss , mp4 , m4v , m4p , m4b , 3gp , 3gpp , 3g2 , 3gp2 , ogg , mov , qt , amr , rm , ram , rmvb , rpm
" :after-read="afterRead">
      <van-button icon="plus" type="info" size="small">上 传</van-button>
    </van-uploader>
    <div class="container">
      <div v-for="(item, index) in fileList" :key="index" style="margin-right:30px;margin-top:20px">
        <img @click="handledetail(item.url)" style="width:60px;height:60px" v-if="['jpg','png','jpeg'].includes(item.fileType)" :src="item.url" />
        <img style="width:70px;height:70px" v-else-if="['mp3','aac'].includes(item.fileType)" src="@/assets/img/audio1.png" />
        <img style="width:60px;height:60px" v-else-if="['mp4','ogg'].includes(item.fileType)" src="@/assets/img/video1.png"/>
         <!-- <audio width="20" height="20" controls v-else-if="['mp3','aac'].includes(item.fileType)" :src="item.url"></audio> -->
        <!-- <video width="70" height="70" controls v-else-if="['mp4','ogg'].includes(item.fileType)" :src="item.url"></video>  -->
        <img style="width:60px;height:60px" v-else src="@/assets/img/file.png" />
        <van-icon name="delete" @click="beforeDeleteBack(index)" class="delte" />
      </div>
    </div>
  </div>
</template>

<script>
import { upLoadApi } from '@/api/oss.js'
import { ImagePreview, Dialog } from 'vant'
export default {
  data() {
    return {
      fileList: []
    }
  },
  props: {
    maxCount: {
      // 图片张数
      type: Number,
      default: 12
    },
    fileListArr: []
  },
  watch: {
    fileListArr(newValue, oldValue) {
      this.fileList = newValue
      console.log('音频我监听到的',this.fileList)
    }
  },
  methods: {
    // 图片查看功能
    handledetail(item) {
      console.log(item)
      ImagePreview({
        images: [item],
        closeable: true
      })
    },
    // 上传图片校验
    beforeRead(file) {
      if (
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/bpm' ||
        file.type === 'image/HEIC'
      ) {
        return true
      }
      this.$toast.fail('请上传正确格式的图片！')
      return false
    },
    // 照片文件删除
    beforeDeleteBack(index) {
      return new Promise((resolve, reject) => {
        this.$dialog
          .confirm({
            message: '确定删除？'
          })
          .then(() => {
            this.fileList.splice(index, 1)
            this.$toast.success('删除成功')
            console.log('文件删除之后的fileList', this.fileList)
            this.$emit('handlePic', this.fileList)
            resolve()
          })
          .catch(error => {
            this.$toast.success('已取消')
            reject(error)
          })
      })
    },
    // 上传图片
    afterRead(file) {
      console.log('上传的文件', file)
      let fd = new FormData()
      fd.append('webFile', file.file)
      upLoadApi(fd)
        .then(res => {
          if (res.code == 200) {
            let url = res.data.downPath.replace('~/', '')
            // this.fileList.pop()
            this.fileList.push({
              url: `${window.webConfig.api}/oss-api-service/${url}`,
              id: res.data.id,
              fileType: res.data.extension
            })
          }
          console.log('打印fileList', this.fileList)
          this.$emit('handlePic', this.fileList)
        })
        .catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
audio{
  width:50px !important;
  height:50px !important;
}
</style>

父组件

    <van-field required name="pictureAfter" label="处置后照片" :rules="[{ required: true, message: '请选择' }]">
          <template #input>
            <uploader @handlePic="handlePicAfter" :fileListArr='fileList2'></uploader>
          </template>
        </van-field>
        <!-- 附件 -->
        <van-field name="pictureBefroe" label="附件">
          <template #input>
            <file-uploader @handlePic="handleFj" :fileListArr='fileList3'></file-uploader>
          </template>
        </van-field>
        <!-- 录音 -->
        <van-field name="pictureBefroe" label="录音">
          <template #input>
            <file-uploader @handlePic="handleVideo" :fileListArr='fileList4'></file-uploader>
          </template>
        </van-field>

          // 附件
            if (this.form.fj) {
              let temp = []
              this.form.fj.split(',').forEach(item => {
                getAttachmentApi(item).then(res => {
                  temp.push({
                    id: this.form.fj,
                    url: `${window.webConfig.api}/oss-api-service/` + res.data.downPath.replace('~/', ''),
                    fileType: res.data.extension
                  })
                })
              })
              this.fileList3 = temp
              console.log('输出附件', this.fileList3)
            }
            // 录音
            if (this.form.video) {
              let temp = []
              this.form.video.split(',').forEach(item => {
                getAttachmentApi(item).then(res => {
                  temp.push({
                    id: this.form.video,
                    url: `${window.webConfig.api}/oss-api-service/` + res.data.downPath.replace('~/', ''),
                    fileType: res.data.extension
                  })
                })
              })
              this.fileList4 = temp
              console.log('输出附件', this.fileList4)
            } //if-end

image.png