日常中，出来Element UI中Upload 上传组件以外，input也可以实现上传文件，它可以上传文件夹、单个文件以及多个文件。

        实现上传功能只需要给input添加属性 type='file',即可实现上传功能，当然，上传文件夹需要添加webkitdirectory属性

效果：

 Ⅰ 上传文件夹

<input ref="fileRef" title="" type='file' name="file" webkitdirectory class="file-input"
	@change="change" />复制

在change事件中可以获取到上传的文件目录

change() {
    //打印上传的文件目录
	console.log(this.$refs.fileRef.files)
}复制

Ⅱ 上传单个文件/多个文件

<input ref="fileRef" title="" type='file' name="file" multiple class="file-input"
    @change="change($event,value)" accept="image/png, image/jpeg, .svs" />复制

 说明：1.在change事件中如果还需要传递其他的参数时，可以像上面那么写（$event，参数），就可以获取到上传文件的同时也可以获取到要传递的参数

            2.accept：限制上传文件的格式，上面则只允许上传  .png  .jpeg .svs格式的文件

            3.multiple ：上传多个文件。想要上传多个文件需要在选择文件时，按住Ctrl进行多选

change(e, value) {
	console.log('上传文件列表',e.target.files)
    console.log('传递的其他参数',value)

    //若想要获取上传的本地图片并赋值，通过ref实现
    var fileInput = this.$refs.fileRef;
	var file = fileInput.files[0];
	var reader = new FileReader(); 
	reader.onload = function(e) { 
		var url = e.target.result; // 获取图片地址并赋值 
	}; 
	reader.readAsDataURL(file);
}复制

这就可以获取到上传的文件目录了！

悄悄说一下，如果调取接口的时候，传递的上传文件类型为FormData类型，则使用

const formData = new FormData(); //转换参数类型
formData.append('对应字段', 传递的参数);复制

其中上传单个文件时，你会发现第一次上传和第二次上传的图片是同一张的话，第二次上传无反应，解决这个问题，只需要在接口调取成功的时候，添加 e.target.value = '' 就可以实现多次上传同一张图片了！