0%

vue 上传

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 中上传文件方法

上传文件时,需要headersmultipart/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)
});