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.

cag2050/qiniu_upload

qiniu_demo

Build Setup