Vue结合Vant进行文件上传

html:

调起手机文件夹及录像机上传视频:

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="video/*">
    <span class="icon">&#xaa710;</span>
    <span class="name">添加视频</span>
</van-uploader>

调起手机文件夹及摄像头上传图片:

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="image/*">
    <span class="icon">&#xaa710;</span>
    <span class="name">添加图片</span>
</van-uploader>

调起手机文件夹及录音上传音频:

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="audio/*">
    <span class="icon">&#xaa710;</span>
    <span class="name">添加音频</span>
</van-uploader>

script:

data() {
	return {
		imgList: [], // 图片
        videoList: [], // 视频
        audioList: [], // 音频
	}
}
methods: {
	afterRead(file, detail) {
      Toast.loading({
        message: "文件上传中,请稍后~",
        forbidClick: true,
        duration: 0
      });
      file.status = "uploading";
      file.message = "上传中";
      var param = { type: "image" };
      var that = this;
      console.log("file", file);

      if (file.file.type.indexOf("video") >= 0) {
        param.type = "video";
      }
      if (file.file.type.indexOf("image") >= 0) {
        param.type = "image";
      }
      if (file.file.type.indexOf("audio") >= 0) {
        param.type = "audio";
      }
      this.upload(file, param, res => {
        if (param.type == "audio") {
          that.audioList.push({
            seconds: res.seconds,
            url: res.url
          });
        } else if (param.type == "video") {
          that.videoList.push({
            type: param.type,
            url: res
          });
        } else {
          that.imgList.push({
            type: param.type,
            url: res
          });
        }
        file.status = "succeed";
        file.message = "";
        Toast.clear();
        console.log(this.imgList, '图片')
		console.log(this.videoList, '视频')
		console.log(this.audioList, '音频')
      });
    },
}

upload() {
	// oss上传
import OSS from 'ali-oss'
import md5 from 'js-md5'
import {Toast} from 'vant';

const clientOss = new OSS({
    region: 'oss-cn-beijing',
    endpoint: 'https://xxxx.xxxxxxxxxxxxxx.com', // 地址
    cname: true,
    // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
    accessKeyId: 'xxxxxxxxxxxx',  // ID
    accessKeySecret: 'xxxxxxxxxxxxx',
    bucket: 'xxxxxxxxxxxxxx',
    secure:true
})

// oss上传图片与视频
export function upload(params, data, callback) {
    // 文件类型


    const file_type = params.file.type.split('/')[0]
    // 文件格式
    const file_format = params.file.type.split('/')[1]
    // 图片格式
    const acceptImage = ['jpg', 'jpeg', 'png', 'gif']
    // 视频格式
    const acceptVideo = ['mp4']
    // 音频格式
    const acceptAudio = ['mp3']


    // 1、判断文件类型是否正确
    if (data.type !== file_type) {
        Toast('请上传正确的文件类型！')
        callback({ status: 'error' })
        return false
    }

    // 2、判断文件格式
    if (file_type === 'image') {
        const isAccept = acceptImage.includes(file_format.toLowerCase(), 0)
        if (!isAccept) {
            Toast('文件格式只支持PNG，JPG，GIF，请重新上传！')
            callback({ status: 'error' })
            return false
        }
    } else if (file_type === 'video') {
        const isAccept = acceptVideo.includes(file_format.toLowerCase(), 0)
    } else if (file_type === 'audio') {
        const isAccept = acceptAudio.includes(file_format.toLowerCase(), 0)
        if (!isAccept) {
            Toast('文件格式只支持MP3，请重新上传！')
            callback({ status: 'error' })
            return false
        }
    }

    // 3、判断文件大小是否超出限制
    if (file_type === 'image') {

        const file_size = params.file.size / (1 * 1024 * 1024).toFixed(1)

        if (file_size >= 5) {

            Toast('文件大小超出5M，请重新上传！')
            callback({ status: 'error' })
            return false
        } else {
            // 4、上传文件
            // 文件存储名称，key
            const file_name = md5(params.file.name.split('.')[0] + new Date().getTime()) + '.' + file_format
            // 第一个参数表示上传到OSS的Object名称，第二个参数表示本地文件或者文件路径
            clientOss.put('images/' + file_name, params.file).then(res => {
                callback(res.url)
            }).catch((err) => {
                console.log('error:', err)
                return false
            })
        }
    } else if (file_type === 'video') {
        const url = URL.createObjectURL(params.file)
        const audioElement = new Audio(url)
        audioElement.addEventListener('loadedmetadata', () => {
            const file_time = Math.floor(audioElement.duration)
            if (file_time > data.len) {
                Toast('视频时长不可超过' + data.len + '秒，请重新上传！')
                callback({ status: 'error' })
                return false
            } else {
                // 4、上传文件
                // 文件存储名称，key
                const file_name = md5(params.file.name.split('.')[0] + new Date().getTime()) + new Date().getTime() + '.' + file_format
                // 第一个参数表示上传到OSS的Object名称，第二个参数表示本地文件或者文件路径
                clientOss.put('images/' + file_name, params.file).then(res => {
                    callback(res.url)
                }).catch((err) => {
                    console.log('error:', err)
                    return false
                })
            }
        })
    } else if (file_type === 'audio') {

        const url = URL.createObjectURL(params.file)
        const audioElement = new Audio(url)
        audioElement.addEventListener('loadedmetadata', () => {
            const file_time = Math.floor(audioElement.duration)
            if (file_time > data.len) {
                Toast('音频时长不可超过' + data.len + '秒，请重新上传！')
                callback({ status: 'error' })
                return false
            } else {
                // 4、上传文件
                // 文件存储名称，key
                var name = "";
                if (params.file.name) {
                    name = params.file.name
                } else {
                    var date=new Date()
                    name =date.getFullYear()+"_"+ new Date().getTime()
                }
                const file_name = md5(name.split('.')[0] + new Date().getTime()) + new Date().getTime() + '.' + file_format
                // 第一个参数表示上传到OSS的Object名称，第二个参数表示本地文件或者文件路径
                clientOss.put('images/' + file_name, params.file).then(res => {
                    const param = {url: res.url, seconds: file_time}
                    callback(param)
                }).catch((err) => {
                    console.log('error:', err)
                    return false
                })
            }
        })
    }
}

export function imgOverSize(params, data, callback) {
    const file_size = params.file.size / (1 * 1024 * 1024).toFixed(1)

    if (file_size >= 5) {

        Toast('文件大小超出5M，请重新上传！')

        return true
    }else{
        return false;
    }
}

ok,完成!