Giter VIP home page Giter VIP logo

qiniu_upload's Introduction

qiniu_demo

A Vue.js project

需要修改的地方:

  1. 项目目录下 create_uptoken.js 文件。   要修改:qiniu.conf.ACCESS_KEY、qiniu.conf.SECRET_KEY、bucket_name。
  2. 修改 src/config/config.js 中的 bucket_name、domain、uptoken( uptoken 是运行 create_uptoken.js,打印出的字符串。如果提示过期,重新获取并更改)。  

项目说明:

  1. src/components/Upload.vue 文件里引入了 node_modules 中安装的 qiniu-js:require('qiniu-js/dist/qiniu.min.js')
  2. 项目目录下 index.html 引入了 plupload:<script src="http://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script>
  3. 断点续传的含义:配置项 chunk_size 值为0时表示不使用分片上传功能(分片上传功能实现了断点续传)
  4. src/components/El_upload.vue 是使用饿了么组件el-upload,上传到七牛的例子。
  5. src/components/MultiUpload.vue 是包含子组件 src/components/Upload.vue 的父组件,可以创建多个Upload,Upload.vue是使用官方js-sdk方式上传,实现了断点续传、暂停、继续。如果需要,可以在 Upload.vue 的 props 中再添加属性。
  6. src/components/MultiFormData.vue 是包含子组件 src/components/FormData.vue 的父组件,可以创建多个FormData,FormData是使用formdata表单的形式上传。如果需要,可以在 FormData.vue 的 props 中再添加属性。
  7. 七牛使用 Formdata 方式上传,缺点: 1). IE 8/9 不支持。 2). 需要自己实现分片上传功能(分片上传功能实现了断点续传、暂停和继续)。 FormData.vue 和 El_upload.vue 都是使用了 Formdata 方式。 在不考虑兼容性和不需要分片上传的情况下,可以直接使用 Formdata 结合七牛表单上传的方式上传文件。
  8. 七牛使用 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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.