注：一些实体类数据自行修改
1，api文件
import request from '@/router/axiosInfo';
export const uploadChunk = (data) => {
return request({
url: '/api/blade-sample/sample/covid19/uploadChunk',
method: 'post',
data
})
}
export const uploadMerge = (data) => {
return request({
url: '/api/blade-sample/sample/covid19/uploadMerge',
method: 'post',
data
})
}
2， axios文件
/**
* 全站http配置
*
* axios参数说明
* isSerialize是否开启form表单提交
* isToken是否需要token
*/
import axios from 'axios';
import store from '@/store/';
import router from '@/router/router';
import { serialize } from '@/util/util';
import { getToken } from '@/util/auth';
import { Message } from 'element-ui';
import { isURL } from "@/util/validate";
import website from '@/config/website';
import { Base64 } from 'js-base64';
import { baseUrl } from '@/config/env';
// import NProgress from 'nprogress';
// import 'nprogress/nprogress.css';
import crypto from '@/util/crypto';
//默认超时时间
axios.defaults.timeout = 100000;
//返回其他状态码
axios.defaults.validateStatus = function (status) {
return status >= 200 && status <= 500;
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
// NProgress.configure({
// showSpinner: false
// });
//http request拦截
axios.interceptors.request.use(config => {
//开启 progress bar
// NProgress.start();
//地址为已经配置状态则不添加前缀
if (!isURL(config.url) && !config.url.startsWith(baseUrl)) {
config.url = baseUrl + config.url
}
//headers判断是否需要
const authorization = config.authorization === false;
if (!authorization) {
config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
}
//headers判断请求是否携带token
const meta = (config.meta || {});
const isToken = meta.isToken === false;
//headers传递token是否加密
const cryptoToken = config.cryptoToken === true;
//判断传递数据是否加密
const cryptoData = config.cryptoData === true;
const token = getToken();
if (token && !isToken) {
config.headers[website.tokenHeader] = cryptoToken
? 'crypto ' + crypto.encryptAES(token, crypto.cryptoKey)
: 'bearer ' + token;
}
// 开启报文加密
if (cryptoData) {
if (config.params) {
const data = crypto.encryptAES(JSON.stringify(config.params), crypto.aesKey);
config.params = { data };
}
if (config.data) {
config.text = true;
config.data = crypto.encryptAES(JSON.stringify(config.data), crypto.aesKey);
}
}
//headers中配置text请求
if (config.text === true) {
config.headers["Content-Type"] = "text/plain";
}
//headers中配置serialize为true开启序列化
if (config.method === 'post' && meta.isSerialize === true) {
config.data = serialize(config.data);
}
return config
}, error => {
return Promise.reject(error)
});
//http response 拦截
axios.interceptors.response.use(res => {
//关闭 progress bar
// NProgress.done();
//获取状态码
const status = res.data.code || res.status;
const statusWhiteList = website.statusWhiteList || [];
const message = res.data.msg || res.data.error_description || '未知错误';
const config = res.config;
const cryptoData = config.cryptoData === true;
//如果在白名单里则自行catch逻辑处理
if (statusWhiteList.includes(status)) return Promise.reject(res);
//如果是401则跳转到登录页面
if (status === 401) store.dispatch('FedLogOut').then(() => router.push({ path: '/login' }));
// 如果请求为非200否者默认统一处理
if (status !== 200) {
Message({
message: message,
type: 'error'
});
return Promise.reject(new Error(message))
}
// 解析加密报文
if (cryptoData) {
res.data = JSON.parse(crypto.decryptAES(res.data, crypto.aesKey));
}
return res;
}, error => {
// NProgress.done();
return Promise.reject(new Error(error));
});
export default axios;
3，vue源码
<template>
<el-upload class="upload-demo" :on-change="handleChange" :show-file-list="false" :limit="1">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadMerge" v-loading.fullscreen.lock='loading'>上传到服务器</el-button>
<el-progress :percentage="percentage" :color="customColor"></el-progress>
</el-upload>
</template>
<script>
import { uploadMerge, uploadChunk } from "@/api/sample/sampleCovid19Info";
export default {
data() {
return {
percentage: 0,
customColor: '#409eff',
fileList: [], // 文件列表
chunks: [], // 切片数组
currentChunkIndex: 0, // 当前切片索引
totalChunks: 0, // 总切片数
currentFile: null, // 当前处理文件
totalSize: 0,
loading: false
};
},
methods: {
async uploadMerge() {
this.loading = true
const formData = new FormData();
formData.append('fileName', this.currentFile.name);
formData.append('totalSize', this.totalSize);
console.log(22222);
try {
let res = await uploadMerge({ fileName: this.currentFile.name, totalSize: this.totalSize })
console.log(res, '2');
if (res.data.code === 200) {
this.fileList = []
this.chunks = []
this.currentChunkIndex = 0
this.totalChunks = 0
this.currentFile = null
this.totalSize = 0
this.$message({
type: "success",
message: "添加成功!"
});
this.loading = false
} else {
this.$message({
type: "success",
message: "添加失败!"
});
this.loading = false
}
} catch (error) {
this.$message.error(error)
} finally {
this.loading = false
}
},
handleChange(file, fileList) {
this.totalSize = file.size
// 当文件变化时，执行切片操作
if (file.status === 'ready') {
this.currentFile = file.raw; // 获取原始文件对象
this.sliceFile(this.currentFile);
}
},
async sliceFile(file) {
const chunkSize = 1024 * 1024 * 10; // 切片大小设置为1MB
const totalSize = file.size;
this.totalChunks = Math.ceil(totalSize / chunkSize);
for (let i = 0; i < this.totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, totalSize);
const chunk = file.slice(start, end);
this.chunks.push(chunk);
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('chunkIndex', i);
formData.append('totalChunks', this.totalChunks);
formData.append('fileName', this.currentFile.name);
formData.append('totalSize', this.totalSize);
let res = await uploadChunk(formData)
if (res.data.code === 200) {
this.currentChunkIndex = i + 1;
if (this.percentage != 99) {
this.percentage = i + 1;
}
//判断文件是否上传完成
if (this.currentChunkIndex === this.totalChunks) {
this.percentage = 100
this.$message({
type: "success",
message: "上传成功!"
});
}
}
}
}
}
}
</script>
4，切片请求接口
5，合并接口
