cag2050 / Qiniu_upload
vue中使用七牛上传的例子(vue init webpack构建,实现了组件化、断点续传、暂停上传、继续上传)
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Qiniu upload
cdnjs-extension
📦 [Chrome Extension] Replace the links of cdnjs with Qiniu.
Stars: ✭ 22 (-51.11%)
Mutual labels: qiniu
tiny-qiniu-request
tiny-qiniu for rc-upload or antd upload component `customRequest` property
Stars: ✭ 13 (-71.11%)
Mutual labels: qiniu
qu
Quickly generating unique url of a picture for markdown files.
Stars: ✭ 24 (-46.67%)
Mutual labels: qiniu
Springboot Learn
🌹springboot常用框架整合示例,涉及多种网站监控,数据缓存,网络通信,持久层,权限管理,常用工具等
Stars: ✭ 270 (+500%)
Mutual labels: qiniu
vscode-qiniu-upload-image
一个VS Code插件,写Markdown时可以快捷上传本地图片获取七牛图床外链。
Stars: ✭ 87 (+93.33%)
Mutual labels: qiniu
Nodejs Sdk
Qiniu Resource (Cloud) Storage SDK for Node.js
Stars: ✭ 554 (+1131.11%)
Mutual labels: qiniu
free-fs
✨Free-Fs 开源文件管理系统:基于 SpringBoot2.x + MyBatisPlus + MySQL + Shiro+ Layui 等搭配七牛云,阿里云OSS实现的云存储管理系统。包含文件上传、删除、预览、云资源列表查询、下载、文件移动、重命名、目录管理、登录、注册、以及权限控制等功能。
Stars: ✭ 49 (+8.89%)
Mutual labels: qiniu
oss-client
七牛云文件仿百度网盘文件夹管理,上传下载,删除。七牛云存储,七牛云图床。桌面应用程序 windows mac
Stars: ✭ 89 (+97.78%)
Mutual labels: qiniu
Qiniu ueditor 1.4.3
UEditor1.4.3版本-直接上传视频、附件、图片到七牛云存储,并且支持图片在线管理功能
Stars: ✭ 305 (+577.78%)
Mutual labels: qiniu
room.cafe
An extremely simple video meeting, integrated whiteboard, chat and screen sharing
Stars: ✭ 34 (-24.44%)
Mutual labels: qiniu
Aragorn
A tool to upload or manage files by object storage sdk
Stars: ✭ 266 (+491.11%)
Mutual labels: qiniu
Node Qiniu Sdk
七牛云SDK,使用 ES2017 async functions 来操作七牛云,接口名称与官方接口对应,轻松上手,文档齐全
Stars: ✭ 44 (-2.22%)
Mutual labels: qiniu
Laravel Filesystem Qiniu
A Qiniu Storage filesystem for Laravel
Stars: ✭ 437 (+871.11%)
Mutual labels: qiniu
qiniu_demo
A Vue.js project
需要修改的地方:
- 项目目录下 create_uptoken.js 文件。 要修改:qiniu.conf.ACCESS_KEY、qiniu.conf.SECRET_KEY、bucket_name。
- 修改 src/config/config.js 中的 bucket_name、domain、uptoken( uptoken 是运行 create_uptoken.js,打印出的字符串。如果提示过期,重新获取并更改)。
项目说明:
- src/components/Upload.vue 文件里引入了 node_modules 中安装的 qiniu-js:require('qiniu-js/dist/qiniu.min.js')
- 项目目录下 index.html 引入了 plupload:
<script src="http://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script>
- 断点续传的含义:配置项 chunk_size 值为0时表示不使用分片上传功能(分片上传功能实现了断点续传)
- src/components/El_upload.vue 是使用饿了么组件el-upload,上传到七牛的例子。
- src/components/MultiUpload.vue 是包含子组件 src/components/Upload.vue 的父组件,可以创建多个Upload,Upload.vue是使用官方js-sdk方式上传,实现了断点续传、暂停、继续。如果需要,可以在 Upload.vue 的 props 中再添加属性。
- src/components/MultiFormData.vue 是包含子组件 src/components/FormData.vue 的父组件,可以创建多个FormData,FormData是使用formdata表单的形式上传。如果需要,可以在 FormData.vue 的 props 中再添加属性。
- 七牛使用 Formdata 方式上传,缺点: 1). IE 8/9 不支持。 2). 需要自己实现分片上传功能(分片上传功能实现了断点续传、暂停和继续)。 FormData.vue 和 El_upload.vue 都是使用了 Formdata 方式。 在不考虑兼容性和不需要分片上传的情况下,可以直接使用 Formdata 结合七牛表单上传的方式上传文件。
- 七牛使用 vue-file-upload 插件上传方式,是基于表单上传(vue-file-upload官方地址:https://github.com/marchFantasy/vue-file-upload ),参看:https://github.com/cag2050/vue_file_upload_demo
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].