vue配合element压缩图片、视频并完成文件上传

要使用Vue和Element配合进行文件上传，可以使用Element的Upload组件。在上传之前，可以使用一些第三方库来压缩图片和视频。

对于图片，可以使用compressorjs或image-compressor库。这些库可以将图片压缩到指定的大小，并返回一个Blob对象，可用于上传。

对于视频，可以使用video-compressor库。该库支持将视频转换为不同的格式和分辨率，以减小文件大小。然后，也可以使用Blob对象上传视频。

下面是一个上传图片和视频的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :limit="3"
      :on-exceed="handleExceed"
      multiple
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传不超过 3MB 的图片或视频，且最多上传 3 个文件</div>
    </el-upload>
  </div>
</template>

<script>
import Compressor from 'compressorjs'
import VideoCompressor from 'video-compressor'

export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      // 判断文件类型
      const type = file.type.split('/')[0]
      if (type === 'image') {
        // 压缩图片
        return new Promise((resolve, reject) => {
          new Compressor(file, {
            quality: 0.6, // 压缩质量
            success(result) {
              resolve(result)
            },
            error(err) {
              reject(err)
            }
          })
        })
      } else if (type === 'video') {
        // 压缩视频
        return new Promise((resolve, reject) => {
          const compressor = new VideoCompressor({
            input: file,
            output: {
              size: file.size > 10 * 1024 * 1024 ? '720p' : '480p', // 根据文件大小选择分辨率
              format: 'mp4'
            }
          })

          compressor.compress()
            .then(result => {
              resolve(result)
            })
            .catch(err => {
              reject(err)
            })
        })
      }
    },
    handleSuccess(res, file) {
      console.log(res)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    }
  }
}
</script>

上述示例中，使用了Compressor库来压缩图片，使用VideoCompressor库来压缩视频。在beforeUpload方法中，先判断文件类型，然后使用相应的库进行压缩。最后返回一个Promise对象，用于上传。在handleSuccess方法中，可以处理上传成功后的返回结果。在handleExceed方法中，可以处理超过文件数量限制时的提示。