input原生上传文件的使用

input原生上传文件的使用

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

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

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

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

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

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

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

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

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

执行发送,

可以在change事件中限制上传文件类型和大小

 var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if (size > 1000) {
            alert("附件不能大于1M");
            target.value = "";
            return false;   //阻止submit提交
        }
        var name = target.value;
        var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
            alert("请选择图片格式文件上传(jpg,png,gif,gif等)！");
            target.value = "";
            return false;   //阻止submit提交
        }