vue 上传

Posted on Edited on In Disqus:

vue 上传文件

在vue中确认上传的文件

input标签中设置ref

1
2
<input type="file" ref="FileUp" class="custom-file-input" id="customFile" @change="FileUpload">
<label class="custom-file-label" for="customFile"></label>
1
2
3
4
5
6
7
8
FileUpload() {
	if (!this.$refs.FileUp.files.length) {
		this.upform.upfile = ''
	}else{
		this.upform.upfile = this.$refs.FileUp.files[0]
		this.upform.name = this.$refs.FileUp.files[0].name
	}
},

随后文件可以正常上传。

自动获取文件名

bootstrap 4中自动载入文件名需要使用bs-custom-file-input包

1
npm install bs-custom-file-input --save

vue 中使用

1
2
3
4
5
6
7
8
9
10
11
12
mounted() {
	this.getFileName()
},

methods: {
	getFileName() {
		$('.custom-file-input').on('change', function() {
			let fileName = $(this).val().split('\\').pop();
			$(this).siblings('.custom-file-label').addClass('selected').html(fileName);
		});
	},
}

之后再选择文件后，input便签可以自动显示文件名。

axios 中上传文件方法

上传文件时，需要headers为multipart/form-data。

注意请求时使用formData不能使用form

formData 中数据使用append()传入

1
formData.append('file', this.upform.upfile)

注意laravel中数据名称对应

1
2
3
4
5
6
7
8
axios.post('/game/json' , formData ,
{
	headers: {
		'Content-Type': 'multipart/form-data'
	}
}).then( response => {
		console.log(response.data)
});