input file 实现 py 文件的上传与读取

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);  // 这就是文本类容，为一串字符串
        }
	}
}