在vue3项目中实现文件分片上传vue-simple-uploader

vue-simple-uploader 是一个基于 Vue.js 的简单文件上传插件，可支持文件分片上传、断点续传以及秒传，有以下几个特点：

1、简单易用：只需在 Vue 组件中使用该插件，并设置相应的配置选项即可实现文件上传功能。

2、多文件上传：插件支持同时上传多个文件，可以选择并一次性上传多个文件。

3、进度条显示：该插件提供了进度条显示上传进度，让用户清楚地知道文件上传的状态和进度。

4、上传前验证：可以通过设置验证规则，对上传的文件进行前端验证。例如，限制文件类型、大小等，以确保只上传符合要求的文件。

5、自定义选项：插件提供了一些可自定义的选项，如上传地址、请求头部、参数等，以满足不同的业务需求。

6、事件回调：提供了丰富的事件回调函数，允许在不同的上传阶段执行自定义逻辑，如上传前、上传成功、上传失败等。

总之，Vue Simple Uploader 简化了文件上传的过程，并提供了一些有用的功能和灵活的配置选项，易于集成和使用。

最终成功效果

1、首先需要下载依赖，vue-simple-uploader、spark-md5

npm i --save vue-simple-uploader@next spark-md5

下载好的版本号是1.0.1，这个版本是支持vue3的，不加@next 默认是0.7.6，是只支持vue2的，vue3中使用会报错。

2、main.js 注册

import { createApp } from 'vue';
import App from './App.vue';
// 文件分片上传
import uploader from 'vue-simple-uploader';
import 'vue-simple-uploader/dist/style.css';

createApp(App).use(uploader).mount('#app');

3、编写文件类型 accept.config.js

export const ACCEPT_CONFIG = {
	image: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
	video: ['.mp4', '.rmvb', '.mkv', '.wmv', '.flv'],
	document: [
		'.doc',
		'.docx',
		'.xls',
		'.xlsx',
		'.ppt',
		'.pptx',
		'.pdf',
		'.txt',
		'.tif',
		'.tiff',
		'.rar',
		'.zip',
	],
	getAll() {
		return [...this.image, ...this.video, ...this.document];
	},
};

4、编写upload.vue

5、这是最后合并需要的接口 mergeFile，这个看各项目是怎么封装request，下面只是个例子

import request from '@/utils/request';

export const mergeFile = (data) => {
	return request({
		url: '/uploader/mergeFile',
		method: 'POST',
		data,
	});
};

6、使用

上传文件后端一共需要写三个接口，其中给到前端只需要两个即可，如下：

1、/uploader/chunk：upload.vue文件的options对象下的target，这里需要注意接口携带token的问题，也有些项目是cookie，还有就是跨域的问题，也就是为什么要用import.meta.env.VITE_API_URL进行拼接的原因，本地联调的话因为VITE_APP_URL环境变量设置的是 /api ，所以是http://localhost:6666/api/uploader/chunk

2、/uploader/mergeFile：这个是将上传文件成功后的各分片最后合并的接口