问题背景
项目需要上传大文件,既然是大文件,如果一次性进行读取发送、接收都是不可取的,很容易导致内存问题。所以对于大文件上传,就一定要实现切片上传、断点续传。如果自己实现相对比较麻烦,但好消息是正好我们的后台文件服务使用了开源的minio作为对象存储服务,minio也提供了 JavaScript Client SDK ,但当我看到文档正准备一顿操作时就遇到了问题:
问题分析
分析报错后发现原因是我们的项目使用的是vite进行构建,vite默认使用es6标准的 import 的导入方式,不支持require引入。
所以,需要解决的问题就是如何将minio通过import的方式导入到项目中。
解决思路
第一个思路:
尝试将 require 写法直接改为 import 写法,实践结果失败,原因是 minio 又不支持 import 的导入方式。
第二个思路:
既然vite不支持require,但webpack是支持的,可以将minio先通过require导入到一个使用webpack构建的项目,再将此项目引入到我们自己的项目,实践结果成功。
解决方案
最终解决方案为:
新建一个vue2项目,将minio通过require方式导入,再进行导出,然后将项目通过lib库模式打包成组件,上传到npm仓库,项目中使用直接 npm install 命令进行安装使用即可。
打包
下面介绍如何使用vue cli 的lib模式打包库,并发布npm包
第一步:打包
打包命令:vue-cli-service build --target lib --name tz-minio-upload src/minio-upload.js
--target lib 使用lib模式打包
--name tz-minio-upload --指定打包后的文件名
src/minio-upload.js --打包入口文件
package.json(定义打包相关的)
打包入口文件(所有需要导出的项目都要写在这里)
第二步:发布到npm
注意:发布时需要先将源设置为官方源,之前设置过淘宝源的需要修改
1、使用 npm login 进行登录
2、执行 npm publish 进行发布
使用
1、使用npm install '你的包名'进行安装
2、代码中直接通过 import 方式引入即可
资料:
打包后的lib库地址:tz-minio-upload_beta - npm
————————————————
版权声明:本文为CSDN博主「arguments_zd」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_43185384/article/details/127672652