Holdno:vue-upload-qiniu

Attention:This project uses the uploading service of Qiniu,BUT it is NOT the official product of Qiniu Inc.

This is a vue2 component project
You can use this component in vue2 for uploading some pictures to your own Qiniu space
This is my first public project and my first English document
Just for fun
: P

This component does not guarantee the codes can be run properly after you copy them due to it relies on the module relation. As it is a component, you can reference the "vue-upload-qiniu" component to your own project according to the "README" example.

<holdno-upload></holdno-upload>
<script>
// get vue-upload-qiniu component
import holdnoUpload from '../../components/holdnoUpload'
</script>

The useful files are in this directory
/src/pages/create/uploadToQiniu.vue

vue upload component by Qiniu js-sdk

>**Dependent module:**
> - npm
> - webpack
> - vue.js
> - Plupload
> - qiniu-js-sdk
> - weui

Requirements:

http://cdn.staticfile.org/Plupload/2.1.1/plupload.full.min.js

http://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js

start

Install npm
You can search 'install npm' by Baidu or Google :)

Install webpack

$ npm install webpack -g

Install vue
click here

Clone vue-upload-qiniu

git clone git@github.com:holdnoWby/vue-upload-qiniu.git
https://github.com/holdnoWby/vue-upload-qiniu.git

Config

vi project/build/webpack.base.conf.js

let webpackConfig = {
  externals: {
    "Qiniu": "Qiniu"
  }
}

Requirements (after annotation:upload)

vue cli -> root/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <link rel="apple-touch-icon-precomposed" href="/static/img/apple-touch-icon-114x114-precomposed.png">
    <title>集合云</title>
    <link rel="stylesheet" href="/static/css/font-awesome-4.5.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/holdno.css">
  </head>
  <body>
    <div id="app"></div>
    <!--upload-->
    <script src="http://cdn.staticfile.org/Plupload/2.1.1/plupload.full.min.js"></script>
    <script src="http://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

Demo code

Please fill the configuration option

title: String, // upload component title
picOption: Function, // click picture call back
getFiles: String, // get uploaded img url (return array)
uploadingText: String, // uploading show text
domain: String, // Qiniu space bind url
uptokenUrl: String // get Qiniu upload token (http request url)

<template>
  <div>
    <div class="golorry__title-alert">
      一经发布不可修改
    </div>
    <holdno-upload 
      title="图片上传" 
      :picOption="picOption" 
      getFiles="getFiles" 
      uploadingText="上传中..." 
      domain="https://img.holdno.com" 
      uptokenUrl="/Api/gettoken"
    ></holdno-upload>
  </div>
</template>

<script>
// get vue-upload-qiniu component
import holdnoUpload from '../../components/holdnoUpload'

export default {
  components: {
    holdnoUpload
  },
  data () {
    return {
      files: [],
    }
  },
  methods: {
    // click pictures call back
    picOption (files, index) {
      console.log(files)
    },
    // get uploaded img url (files: array)
    getFiles (files) {
      console.log(files)
      this.files = files
    }
  }
}
</script>

<style>
/* write your css */
</style>

Demo show

demo pic

Demo view

This project still under development
When it is completed you can open it here.

Package detail

golorry

readme