asd-mobild/src/views/weibao/components/vanUploader.vue

<template>
  <div class="upload">
    <van-row class="cell">
      <van-col span="6">{{text}}：</van-col>
      <van-col span="18">
        <div class="box">
          <van-uploader v-if="text=='图片'" :before-read="beforeRead" v-model="imgUrl" accept="image/png,image/jpeg,image/jpg" :after-read="afterRead" @delete='deleteUploader'>
          </van-uploader>
          <van-uploader v-else v-model="multiMediaUrl" accept="video/*" :before-read="beforeRead2" :after-read="afterRead" @delete='deleteUploader'>
            <template #preview-cover="{ file }">
              <div v-if="file.type.indexOf('video') !== -1" class="none-box">
                <img :src="require('../assets/video.png')">
              </div>
            </template>
          </van-uploader>
        </div>
      </van-col>
    </van-row>
    <!-- <van-row class="cell">
      <van-col span="6">视频：</van-col>
      <van-col span="18">
        <div class="box">
          <van-uploader v-model="multiMediaUrl" accept="video/*" :after-read="afterRead" @delete='deleteUploader'>
            <template #preview-cover="{ file }">
              <div v-if="file.type.indexOf('video') !== -1" class="none-box">
                <img :src="require('../assets/video.png')">
              </div>
            </template>
          </van-uploader>
        </div>
      </van-col>
    </van-row> -->
  </div>
</template>
<script>
import { uploadImage } from '../api/index.js'
import { compressAccurately } from 'image-conversion'
export default {
  props: ['text', 'showimg'],
  data() {
    return {
      multiMediaUrl: [],
      imgUrl: [],
      fileList: [],
      progress: '',
    }
  },
  watch: {
    showimg: {
      handler(val, old) {
        console.log(val, '123')
        console.log(old, '78')
      },
    },
  },
  methods: {
    childrenClear() {
      this.imgUrl = []
      this.multiMediaUrl = []
    },
    beforeRead2(file) {
      console.log(file.size > 50 * 1024 * 1024)
      if (file.size > 50 * 1024 * 1024) {
        this.$toast('视频不能超过50MB')
        return
      }
      return true
    },
    // 返回布尔值
    beforeRead(file) {
      if (file.length) {
        file.forEach((item) => {
          if (
            item.name.indexOf('.png') == -1 &&
            item.name.indexOf('.jpg') == -1 &&
            item.name.indexOf('.jpeg') == -1
          ) {
            this.$toast('请上传 jpg/png 格式图片')
            return false
          }
        })
      } else {
        if (
          file.name.indexOf('.png') == -1 &&
          file.name.indexOf('.jpg') == -1 &&
          file.name.indexOf('.jpeg') == -1
        ) {
          this.$toast('请上传 jpg/png 格式图片')
          return false
        }
      }

      return true
    },
    async afterRead(file) {
      let formDate = new FormData()
      if (file.length) {
        file.forEach(async (item) => {
          item.status = 'uploading'
          item.message = '上传中...'
          //添加入参
          formDate.append('file', item.file)
          this.uploading(formDate, item)
        })
      } else {
        file.status = 'uploading'
        file.message = '上传中...'
        console.log(file.file.name)
        if (
          file.file.name.indexOf('.png') != -1 ||
          file.file.name.indexOf('.jpg') != -1 ||
          file.file.name.indexOf('.jpeg') != -1
        ) {
          const res = await compressAccurately(file.file, 400)
          console.log(res, 'res')
          const obj = {}
          obj.file = res
          //添加入参
          formDate.append('file', obj.file)
          formDate.append('thumbs', '240x240')
          this.uploading(formDate, file)
        } else {
          // 视频
          console.log(file.file.size, 'file.file')
          //添加入参
          formDate.append('file', file.file)

          this.uploading(formDate, file)
        }
      }
      console.log(this.multiMediaUrl, 'this.multiMediaUrl')
    },
    async uploading(formDate, file) {
      console.log(formDate, 'formDate')
      var res = await uploadImage(formDate, function (e) {
        console.log(e)
        var progress = Math.floor((e.loaded / e.total) * 100) + '%'
        file.message = '上传中' + progress
      })
      console.log(res, 'res')
      if (res.code == '0000') {
        file.status = 'success'
        file.message = '成功'
        this.$emit('getfileList', res.data)
      } else {
        file.status = 'failed'
        file.message = '上传失败'
      }
      return res.code
    },
    deleteUploader(v, index) {
      this.$emit('getfileList', this.text, index.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.cell {
  border-bottom: 1px solid #eee;
  margin-top: 16px;
  font-size: 30px;
  .van-col {
    line-height: 80px;
    min-height: 80px;
  }
  .van-cell {
    padding: 0;
    line-height: 80px;
  }
}
.van-uploader {
  ::v-deep .van-uploader__wrapper {
    .van-uploader__upload {
      width: 200px;
      height: 200px;
    }
  }

  ::v-deep .van-uploader__preview {
    .van-uploader__file-icon,
    .van-uploader__file-name {
      display: none;
    }
    .van-image {
      width: 200px;
      height: 200px;
    }
    width: 200px;
    height: 200px;
  }
  .none-box {
    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>