golorry v1.0.0
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:
start
Install npm You can search 'install npm' by Baidu or Google :) Install webpack
$ npm install webpack -gInstall vue click here Clone vue-upload-qiniu
git clone git@github.com:holdnoWby/vue-upload-qiniu.git
https://github.com/holdnoWby/vue-upload-qiniu.gitConfig
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 view
This project still under development When it is completed you can open it here.
7 years ago