时间:2021-05-26
前言
这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发。在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目。就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接使用。
目前vue-easy-uploader已上传到GitHub和NPM,使用起来方便简单,不需要繁琐的配置即可投入生产,不过需要后端配合,实现上传接口。
本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader
本项目NPM地址: https://mit('set_img_status', 'ready') // 更新文件上传状态 } } }}</script><style lang="less" scoped>...</style>
以上代码中有一些注释序号,是此插件设计的主要思路,其他代码都比较容易理解,分别说下
① 选择文件后执行,img_status状态变为selected。
② 将带上传的图片文件转化为Base64格式,用于缩略图显示。
③ 创建一个表单对象,用于存储待上传的文件。
④ 注意这里的name属性值,暂时写死,后面设计打算从组件中指定name属性,如果是多文件的话,name属性的数组序号从0开始递增。
⑤ 未依赖任何Ajax请求插件,使用原生的XMLHttpRequest对象创建请求。
⑥ 存储上传成功后服务器返回的上传路径。
⑦ 检测上传状态,当在使用此插件时将img_status的状态设置为uploading时执行上传操作。
使用
参考本项目的GItHub和NPM。
注意
使用此插件时,需要与后端约定返回的数据格式,如下:
复制代码 代码如下:
[{"error":0,"url":"\/uploads\/api\/201711\/25\/fde412bd83d3ec5d6a49769bd0c143cd.jpg"},{"error":0,"url":"\/uploads\/api\/201711\/25\/c6fd51f0388c63a0b6d350331c945fb1.jpg"}]
预览如下:
返回的是一个上传后的路径数组,包括error和url字段,每个文件有自己的上传状态,当error为0的时候为上传成功,并返回上传后的路径url
改进
后续版本打算进行如下改进
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在日常开发中经常会遇到文件上传的需求,vue-simple-uploader就是一个基于simple-uploader.js和Vue结合做的一个上传组件,自带U
本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,分享给大家,具体如下:代码地址:https://github.com/jczzq/vu
Vue-Awesome-Swiper轮播图插件,可以同时支持Vue.js(1.X~2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使
本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下:先来看下DemoLiveDemo关于开发Vue插件的几种方式(具体请移步官网)Vue官网
PHP+plupload.jsJS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码HTML代码:多图上传*{margin:0px;padding: