特性
多文件上传 上传图片预览 上传状态监测 删除指定图片 清空图片 重新上传安装
npmivue-easy-uploader--save
使用
在入口文件main.js中加入以下代码:
importVuefrom'vue'importVuexfrom'vuex'importuploaderfrom'vue-easy-uploader'letstore=newVuex.Store({})Vue.use(uploader,store)
插件内部设置了状态管理，因此需要vuex的支持。
在Vue组件中使用
<uploaderurl="http://..."></uploader>
参数说明
url: 上传接口路径
需要与后端约定上传格式，使用表单提交方式，后端需获取input[type='file']的name属性，默认为name="imgFiles[0]"、name="imgFiles[1]"...数组序号从0递增。
上传成功时返回的数据如下:
示例代码
<template><div><uploaderurl="http://..."></uploader><divclass="btn"@click="upload">上传</div></div></template><script>import{mapState}from'vuex'exportdefault{data(){return{imgs:[]}},computed:{...mapState({imgStatus:state=>state.imgstore.img_status,imgPaths:state=>state.imgstore.img_paths})},methods:{upload(){this.$mit('set_img_status','uploading')},submit(){letvalues=[]for(letkeyofthis.imgPaths){values.push(key)}this.imgs=valuesconsole.log(this.imgs)}},watch:{imgStatus(){if(this.imgStatus==='finished'){this.submit()}}},destoryed(){this.imgs=[]}}</script><stylescopedlang="less">.btn{width:100%;height:3em;background-color:green;color:#fff;display:flex;justify-content:center;align-items:center;}</style>
状态管理
状态管理存储在state.imgstore中，包括:
state.imgstore.img_upload_cache#上传文件缓存state.imgstore.img_status#上传状态，包括readyselecteduploadingfinishedstate.imgstore.img_paths#上传后的路径反馈数组(数据结构为Set集合)
img_status
整个上传过程都通过img_status判断，包括以下几个状态:
ready#上传开始前的准备状态selected#已选择上传文件uploading#开始上传finished#上传完毕
开始上传
this.$mit('set_img_status','uploading')
只需要改变状态管理中的img_status为uploading即可。
上传完成
methods:{submit(){//somecode}}computed:{...mapState({imgStatus:state=>state.imgstore.img_status})},watch:{imgStatus(){if(this.imgStatus==='finished'){this.submit()}}}
监视state.imgstore.img_status，当状态变为finished时，执行文件上传完成后的回调。
感谢分享/package/vue-easy-uploader#%E7%89%B9%E6%80%A7
