谁会用vuejs？elupload标签怎么用？如何获取上传文件的路径

<template lang="jade">

vue-file-upload(url='upload.do',

v-bind:files.sync = 'files',

v-bind:filters = "filters",

v-bind:on-complete-upload = 'completeUpload')

table

thead

tr

th name

th size

th progress

th status

th action

tbody

tr(v-for='file in files')

td(v-text='file.name')

td(v-text='file.size')

td(v-text='file.progress')

td(v-text='onStatus(file)')

td

button(type='button',@click="uploadItem(file)") 上传

button(type='button',@click="uploadAll") 上传所有文件

</template>

<script>

import VueFileUpload from 'vue-file-upload'

export default{

data(){

return{

files:[],

//文件过滤器，只能上传图片

filters:[

{

name:"imageFilter",

fn(file){

var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'

return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1

}

}

]

}

},

methods:{

onStatus(file){

if(file.isSuccess){

return "上传成功"

}else if(file.isError){

return "上传失败"

}else if(file.isUploading){

return "正在上传"

}else{

return "待上传"

}

},

uploadItem(file){

//单个文件上传

file.upload()

},

uploadAll(){

//上传所有文件

this.$broadcast('DO_POST_FILE')

},

completeUpload(file,response,status,header){

console.log("finish upload")

}

},

components:{

VueFileUpload

}

}

</script>

vue上传图片是编码，要用到一个文本编辑器，视频教程上使用的是富文本编辑器Tinymce，但是Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤，步骤有些许麻烦，于是打算用跟此博客一样，用markdown带代替，因为此blog的markdown中上传图片是自己修改方法，上传到oss中的，此时传入数据库的图片路径就是保存的到云存储里面的路径。

而我发现Tinymce编辑器在做原本的添加图片时，Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器。

所以，突发奇想能不能修改markdown添加图片功能，实现将图片转为Base64，存入数据库，查找了相关资料后，发现这样虽然可以，但是会导致Pandoc编译速度慢，甚至内存堆栈不足，虽然不推荐此使用，但是还是尝试一下。

---