这是一个相对简单的实现文件上传手段。需要上传文件，通常会想到使用input file 属性来实现，简单便捷。
但是input默认的样式不易更改，于是使用lable标签，使用其for属性，关联到input输入框，点击lable标签会触发input输入框的点击（注意把input隐藏）。
上代码：
<template>
<div>
<!-- 上传单个文件 -->
<label for="fileInput">
<i aria-hidden="true" class="cursor">上传文件</i>
</label>
<input
v-show="false"
type="file"
id="fileInput"
@change="handleFileChange"
name="file"
ref="file"
/>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleFileChange(e) {
let file = e.target.files;
console.log(file);
}
}
}
</script>
<style>
.cursor {
cursor: pointer;
color: #409eff;
font-size: 16px;
}
</style>
若是上传多个文件：在input上加属性 multiple="multiple"即可实现多文件上传，也可以设置文件上传类型是在input上加属性 accept=".xls, .xlsx"
，比如：
<input
v-show="false"
type="file"
id="fileInput"
@change="handleFileChange"
name="file"
ref="file"
multiple="multiple"
accept=".xls, .xlsx,.jpg,.png"
/>
通过from表单提交：
<template>
<div>
<!-- from表单上传文件 -->
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
age: '',
file: '',
name: '',
}
},
methods: {
//1. 获取本地文件
getFile(event) {
this.file = event.target.files;
console.log(this.file);
},
//2. 提交,异步请求
submitForm(event) {
//取消默认行为
event.preventDefault();
let formData = new FormData(); //创建form对象
formData.append('name', this.name); //通过append向form对象添加数据
formData.append('age', this.age);
formData.append('file', this.file);
//配置请求头
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.axios.post('这是一个接口', formData, config).then(function (response) {
if (response.status === 200) {
console.log(response.data);
}
})
}
}
}
</script>
