vue-qiniu-upload
vue2.0 七牛图片上传,支持多张上传
install
> npm install vue-resource --save
> npm install vue-qiniu-upload --save
import
import vueUpload from 'vue-qiniu-upload'
...
Vue.component('vue-upload', vueUpload)
note: 需要从源码获取token
上传照片后,显示时会翻转(关于img的orientation问题),参见图片基本处理:如果原图带有EXIF信息且包含Orientation字段,imageView2默认根据此字段的值进行自动旋转修正。 具备处理动态gif图片的能力
usage
<template>
<div id="app">
<upload :action="action" :token="token" :multiple="multiple" :accept="accept" @on-upload="uploadFile" @on-error="uploadErr" @on-progress="progress">
<template slot="form">
</template>
<template slot="picker">
<span class="btn">上传图片</span>
</template>
</upload>
<div class="block">
<h2>上传结果</h2>
<div id="result">
<p>hash: {{imghash}}</p>
<p>key: {{imgkey}}</p>
</div>
<img :src="imgHash" alt="imgHash" class="viewimg">
<img :src="imgKey" alt="imgKey" class="viewimg">
</div>
<div class="block" id="ajaxErr" v-show="uploadMsg.length">
<h4>uploadMsg: </h4>
<p v-for="(item, index) in uploadMsg" :key="index">{{item}}</p>
</div>
</div>
</template>
<script>
import upload from './components/upload.vue'
export default {
name: 'app',
components: {
upload
},
data: () => {
return {
action: 'http://upload.qiniu.com/', // 替换自己的上传链接
accept: 'image/png, image/jpeg, image/gif',
multiple: true,
// 从[http://jssdk.demo.qiniu.io/formdata]源码获取token
token: 'QWYn5TFQsLLU1pL5MFEmX3s5DmHdUThav9WyOWOm:JcGnWGIzc0POt2eEWWqUUsW8bN0=:eyJkZWxldGVBZnRlckRheXMiOjcsInNjb3BlIjoianNzZGsiLCJkZWFkbGluZSI6MTUwMjc5MTczMX0=',
imghash: '',
imgkey: '',
uploadMsg: []
}
},
computed: {
imgHash: function () {
return `http://7j1xky.com2.z0.glb.qiniucdn.com/${this.imghash}`
},
imgKey: function () {
return `http://7j1xky.com2.z0.glb.qiniucdn.com/${this.imgkey}`
}
},
methods: {
uploadFile (res) {
this.imghash = res.hash
this.imgkey = res.key
},
uploadErr (res) {
this.uploadMsg.push(JSON.stringify(res))
},
progress (e) {
this.uploadMsg.push(`e.loaded: ${e.loaded}, e.total: ${e.total}, percent: ${(e.loaded / e.total) * 100}`)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
text-align: center;
margin-top: 60px;
}
.block,
.viewimg {
margin: 15px;
}
.btn {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.viewimg {
max-width: 200px;
border: 1px dashed #ccc;
border-radius: 4px;
padding: 5px;
background-color: #ccc;
}
</style>
特别感谢
- js-sdk 基于七牛 API 开发的前端 JavaScript SDK
- Formdata 上传 demo Formdata 上传 demo
- 表单上传,关键参数说明