封装一个js文件
/*
* @Descripttion:
* @version:
* @Author: xumingcai
* @Date: 2020-04-15 17:58:03
* @LastEditors: xumingcai
* @LastEditTime: 2020-04-20 16:22:45
*/
import SparkMD5 from 'spark-md5';
import axios, { CancelToken, Cancel} from 'axios';
import { getToken } from '@/core/auth.js';
/**
* 默认配置
*/
var DEFAULT_OPTIONS = {
url: '', // 上传地址
chunkSize: 2 * 1024 * 1024, // 分块大小
retryCount: 5, // 上传失败重试次数
};
/**
* 状态集合
*/
export var STATE = {
PREPARE: 0, // 预备上传
HASH_CALC_ING: 1001, // hash值计算中
HASH_CALC_FAILED: 1002, // hash值计算失败
HASH_CALC_SUCCESS: 1003, // hash值计算成功
UPLOAD_ING: 2001, // 上传中
UPLOAD_CANCEL: 2002, // 已取消上传
UPLOAD_STOP: 2003, // 上传停止
UPLOAD_FAILED: 2004, // 上传失败
UPLOAD_SUCCESS: 2005, // 上传成功
};
/**
* 事件类型
*/
var EVENT_TYPES = {
ERROR: 'error'
};
/**
* 获取字符串
* @param {*} o 非字符串
*/
var toString = o => Object.prototype.toString.call(o);
/**
* 对象数组转数组
* @param {Object} o 对象数组o
*/
var toArray = o => [].slice.call(o, 0);
/**
* 获取文件md5加密
* @param {*} file 文件
*/
export function getFileMd5 (file) {
if (!file) return Promise.reject(new Error('文件不存在'));
const blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
const chunkSize = 2097152;
const chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
return new Promise(function (resolve, reject) {
function loadNext () {
var start = currentChunk * chunkSize;
var end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
fileReader.onload = function (e) {
spark.append(e.target.result);
currentChunk += 1;
if (currentChunk < chunks) {
loadNext();
} else {
resolve(spark.end());
}
};
fileReader.onerror = function (error) {
reject(error);
};
loadNext();
});
}
/**
* 分片上传异常类
* @param {string} message 异常信息
*/
export function ShardUploadError (message, code, stack) {
this.name = 'ShardUploadError';
this.code = code || 1;
this.message = message || '上传失败';
this.stack = stack || (new Error()).stack;
}
// 继承
ShardUploadError.prototype = Object.create(Error.prototype);
ShardUploadError.prototype.constructor = ShardUploadError;
// 继承异常code
Object.assign(ShardUploadError, {
FILE_HASH_CALC_FAILED: 1002, // 文件hash值计算异常
FILE_CHUNK_UPLOAD_FAILED: 3001, // 文件块上传失败
FILE_UPLOAD_FAILED: 2004, // 上传失败
FILE_UPLOAD_CORRUPTION: -303, // 文件上传损坏
FILE_SPLICING_FAILED: -302, // 服务器文件上传成功拼接失败
PARAMETER_ERROR: 4001, // 参数错误
CANCEL_FAILED: 5001, // 取消失败
});
/**
* 处理参数为正常
* @param {number} value 参数值
* @param {number} defaultValue 默认值
*/
function normalizeInteger (value, defaultValue) {
value = parseInt(value);
if (isNaN(value)) { // 不是数字
value = defaultValue;
}
return value;
}
/**
* 分片上传类
* @param {File} file 文件对象
* @param {Object} options 配置
*/
export function ShardUpload (file, options = {}) {
// 非new创建对象
if (!(this instanceof ShardUpload)) return new ShardUpload(file, options);
// 校验文件
if (!file || !(file instanceof File)) throw new ShardUploadError('请传入File对象'
大视频上传 分片及显示进度 vue
最新推荐文章于 2024-07-30 23:06:02 发布