vue-upload-qiniu
vue-upload-qiniu copied to clipboard
holdno
vue upload component by Qiniu js-sdk
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 [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: Function // get uploaded img url (return array)
overMax: Function // morethan the max upload num
max: Number // max upload num
files: Array // uploaded url
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"
:overMax="overMax"
:max="9"
:files="files"
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
},
// alert user morethan the max upload num
overMax () {
// alert('morethan max')
}
}
}
</script>
<style>
/* write your css */
</style>
Demo show
Demo view
This project still under development When it is completed you can open it here.
holdno