1.vue 里用 input file 实现文件的上传与多文件的上传
效果图如下:
html代码如下:
<div>
<!-- 单文件上传 -->
<input type="text" class="form-control" v-model="mainFileName">
<span @click="showFiles"><i class="fa fa-folder-open" aria-hidden="true"></i>浏览文件</span>
<input type="file" class="form-control" name="mainFile" id="mainFile" @change="fileChange($event)" style="display: none">
</div>
<!-- 多文件文件上传 在 input 上加multiple="multiple" -->
<div class="form-group other-file">
<div class="other-file-title">
<label for="">其他的文件:</label>
<span @click="showrelyFiles"><i class="fa fa-folder-open" aria-hidden="true"></i>添加文件</span>
</div>
<input type="file" class="form-control" name="moreFile" multiple="multiple" id="moreFile" @change="moreFileChange($event)" style="display: none">
</div>
利用 formData 来存放文件数据:
var formData = new FormData();
// 获取文件信息
var mainFiles = document.getElementById('mainFile').files[0]; // 单文件
// 将文件信息 放入到 formData 中
formData.append('file', mainFiles);
var moreFiles = document.getElementById('moreFile').files; // 多文件
for (var i in moreFiles) {
// 多文件上传时,需要将各个文件遍历出来
formData.append('moreFiles', moreFiles[i]);
}
// 利用 axios 向后端,发起请求即可
post_(url, formData).then(resp => {
// ..........
})
说一下在多文件上传时遇到的坑: 刚开始在多个文件上传时,我是把它们都放在一个对象里面,结果总是上传不上去,后来发现把它们遍历出来就行了。。。。
2. 读取上传的文件
以上面的单文件上传为例:
文件的读取可以用 FileReader
methods: {
// 每次选择文件是触发
fileChange(e){
var reader = new FileReader();
reader.readAsText(fileData[0]);
reader.onload = function () {
// 不要在这里赋值!!因为此时的 this 不是 vue 实例,
// 刚开始没注意看,我就说数据怎么都更新不了o(╥﹏╥)o
console.log(this.result); // 这就是文本类容,为一串字符串
}
}
}