@preview="handlePreview"
:beforeUpload="beforeUpload"
@change="event => handleChange(event, 'fileList')"
v-decorator="['fileList', {rules:[{required: requiresUpload, message: '请上传视频!'}]}]"
附录upload.js内容
import path from './index'
import { isEmpty } from '@/utils/common'
import { axios } from '@/utils/request'
// 上传文件地址
export const UPLOAD_URL = process.env.VUE_APP_API_BASE_URL + path.upload
// 文件回显前缀
export const FILE_DISPLAY_PREFIX = path.uploads
// 解析文件响应
export function parseFileRespon (response) {
if (isEmpty(response) || response.code !== 10000 || response.result.length < 1) {
this.$message.error(() => {
return response.msg || '服务异常,请稍后再试'
return ''
} else {
return response.result[0]
* 1分片上传 地址
* @returns
export function chunk () {
return UPLOAD_URL + '/oss/aliyun/chunk'
* 2分片上传完成
* @param identifier
* @returns {AxiosPromise}
export function chunkComplete (identifier) {
return axios({
url: path.upload + '/oss/aliyun/chunk/complete',
method: 'post',
params: { 'identifier': identifier }
* 3分片上传取消
* @param identifier
* @returns {AxiosPromise}
export function chunkAbort (identifier) {
return axios({
url: path.upload + '/oss/aliyun/chunk/abort',
method: 'post',
params: { 'identifier': identifier }
* 自定义上传图片
* @param file
* @returns {AxiosPromise}
export function customUploadFile (file) {
const data = new FormData()
data.append('file', file)
return axios({
url: path.upload + '/files',
method: 'POST',
headers: { 'Content-Type': 'multipart/form-data' },
timeout: 1800000,
data: data
* 获取缩略图
* @param url 地址
* @param currentTime 缩略图取第几秒的图片
* @param width
* @param height
* @returns {Promise<unknown>}
export function getVideoFrameImage (url, currentTime = 3, width = 100, height = 100) {
return new Promise((resolve, reject) => {
const video = document.createElement('video')
video.setAttribute('crossOrigin', 'anonymous')
video.setAttribute('preload', 'metadata')
video.setAttribute('src', url)
// 视频开始可能是黑屏状态
video.currentTime = currentTime
video.addEventListener('loadeddata', function () {
const canvas = document.createElement('canvas')
const { videoWidth, videoHeight } = video
const newHeight = height || videoHeight * (width / videoWidth)
canvas.width = width
canvas.height = newHeight
canvas.getContext('2d').drawImage(video, 0, 0, 200, height)
resolve(canvas.toDataURL('image/jpeg'))
// 错误时的特殊处理,(资源404或不可用时触发)
video.addEventListener('error', function (e) {
// console.log('ss', e)
reject(url)