vue实现文件上传前端,Vue文件上传

Vue结合Vant进行文件上传 html:

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

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="video/*"> 򪜐 添加视频</van-uploader>

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

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="image/*"> 򪜐 添加图片</van-uploader>

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

<van-uploader :after-read="afterRead" preview-size="38" upload-icon="plus" accept="audio/*"> 򪜐 添加音频</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,完成!