怎样制造微信小程序_Vue2.0使用vue

Vue2.0利用vue-resource上传文件到七牛的实例代码       本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码,具有一定的参考价值,有兴趣的可以了解一下

本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助

关于上传,总是有很多可以说道的。

16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

上传流程

图不重要看文字

input[type="file"] change事件触发后,先去(如果是图片,可以同时通过FileReader以及readAsDataURL将图片预览在页面上)后台请求七牛的上传token,将拿到的token和key以及通过change传递过来的files一起append到formData中。然后将formData通过post传递给七牛,七牛在处理后将返回真正的文件地址

获取token

const qiniu = require('qiniu')
const crypto = require('crypto')
const Config = require('qiniu-config')
exports.token = function*() {
 //构建一个保存文件名
 //这里没有处理文件后缀,需要自己传递过来,然后在这里处理加在key上,非必须
 const key = crypto.createHash('md5').update(((new Date()) * 1 + Math.floor(Math.random() * 10).toString())).digest('hex')
 //Config 七牛的秘钥等配置
 const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket] 
 qiniu.conf.ACCESS_KEY = ACCESS_KEY
 qiniu.conf.SECRET_KEY = SECRET_KEY
 const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key)
 try {
 const token = upToken.token()
 return this.body = {
 key: key,
 token: token
 } catch (e) {
 // throw error
//假设api 地址是 /api/token 

上传组件 upload.vue

 template 
 label 
 input type="file" :accept="accepts" @change="upload" 
 slot /slot 
 /label 
 /template 
 style lang="scss" 
 .mo-upload {
 display: inline-block;
 position: relative;
 margin-bottom: 0;
 input[type="file"] {
 display: none;
 .mo-upload--label {
 display: inline-block;
 position: relative;
 /style 
 script 
 export default {
 name : 'MoUpload',
 pro凡科抠图 : {
 accepts : { //允许的上传类型
 type : String,
 default : 'image/jpeg,image/jpg,image/png,image/gif'
 flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域
 maxSize : {
 type : Number,
 default : 0 //上传大小限制
 methods: {
 upload (event) {
 let file = event.target.files[0]
 const self = this
 const flag = this.flag
 if (file) {
 if (this.maxSize) {
 //todo filter file
 //filter file, 文件大小,类型等过滤
 //如果是图片文件
 // const reader = new FileReader()
 // const imageUrl = reader.readAsDataURL(file)
 // img.src = imageUrl //在预览区域插入图片
 const formData = new FormData()
 formData.append('file', file)
 //获取token
 this.$http.get(`/api/token/`)
 .then(response = {
 const result = response.body
 formData.append('token', result.token)
 formData.append('key', result.key)
 //提交给七牛处理
 self.$http.post('', formData, {
 progress(event) {
 //传递给父组件的progress方法
 self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag) 
 .then(response = {
 const result = response.body
 if (result.hash result.key) {
 //plete方法
 self.$emit('complete', 200 , result, flag)
 //让当前target可以重新选择
 event.target.value = null
 } else {
 self.$emit('complete', 500, result, flag)
 }, error = self.$emit('complete', 500, error.message), flag)
 /script 

父组件调用

 template 
 section 
 figure 
 img :src="thumbnail" v-if="thumbnail"/ 
 /figure 
 mo-upload flag="'thumbnail'" @complete="uploadComplete" @progress="uploadProgress" 
 a 选择图片文件 i :style="{width:progress + '%'}" /i /a 
 /mo-upload 
 /section 
 /template 
 script 
 import MoUpload from 'upload'
 export default {
 components : {
 MoUpload,
 data () {
 return {
 thumbnail : null,
 progress : 0 //上传进度
 methods : {
 uploadProgress (progress, flag) {
 //这里可以通过回调的flag对不同上传域做处理
 this.progress = progress 100 progress : 0;
 uploadComplete(status, result, flag) {
 if (status == 200) { //
 this.thumbnail = `/${result.key}` //七牛域名 + 返回的key 组成文件url
 } else {
 //失败处理
 /script 

小结

相比于FILEApi 或者其他上传组件,这种方法代码量最小。但是缺点也是显而易见的,大量html5 API的使用,势必会回到兼容性这个老大难上来,慎重的选择性使用吧‘

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。