golorry

v1.0.0

Published

2 years ago

golorry by vue

Downloads

0High
0Medium
0Low

luojf945

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

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 [email protected]: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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme