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) });
|