js上传文件的完整写法(本地用的是vue的环境)

1.在项目中经常会用到需要上传头像,附件的地方,那么我们如何进行上传呢,今天跟大家分享一下,来自项目中的一些上传文件的个人总结

2.首先我们需要在页面中使用一个 input 按钮,并将它的type属性设置为'file',关于上传按钮美化的操作,我已经在上一篇博客中详细的讲解了.下面直接贴出代码截图

若项目中需要支持上传多文件,只需要在input标签上加上 multiple属性就可以了.

要想实现上传操作,还需要在变迁上定义一个change事件,用于触发上传文件发生变动时的函数

@change 这样的定义函数的方式是vue框架里面的,若不需要,直接按js定义的函数方式定义即可

3.定义好事件之后,我们需要给该该事件传递一个参数,这个参数就是表示js原生的dom对象,叫做$event,有了原生的dom对象后,接下来的操作就更加简单了

(1).通过原生dom对象获取已上传的文件列表

当你选择文件后来看看控制台打印的是什么

可以看到,'this.file' 是一个数组,数组里面的每一项对应你上传的每个文件的信息,拿到上传的文件后,应该怎么上传文件呢?,很简单,我们需要实例化一个表单数据对象 formdata ,然后遍历这个数组,插入到这个表单数据对象中

执行发送,

到此,整个上传操作完成.