vant上传音视频文件完整版

image.png

子组件

<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:60px;height:60px" 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" />
        <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
    }
  },
  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;
}
</style>

父组件

   <van-field required name="livePhoto" label="附件" :rules="[{ required: true, message: '请选择' }]">
          <template #input>
            <file-uploader @handlePic="handlePic"></file-uploader>
          </template>
        </van-field>

    //子组件给父组件传递
    handlePic(data) {
      let tempFile = []
      data.forEach(item => {
        tempFile.push(item.id)
      })
      console.log('父组件接受',tempFile)
      this.form.livePhoto = tempFile.join(',')
    },