Vue + Flask 小知识（一）
今天继续分享 Vue.js 学习笔记，上传文件，并显示在下拉框列表中。
前面基础的如何使用 Flask + VUE 搭建环境等知识，可以戳这里查看。
下面我们直接进入主题
显示本地文件
首先，我们要有一个后台接口，来获取到指定目录下的文件。例如如果我们想获取目录下的 xlsx 文件，那么可以编写代码如下：
class FileListView(Resource):
def get(self):
files = os.listdir(PY_DIR)
file_list = []
i = 0
for f in files:
file_dict = {}
if f[-4:] == 'xlsx':
file_dict["value"] = i
file_dict["label"] = f
file_list.append(file_dict)
i += 1
return {'code': 200, 'data': file_list}
api_data.add_resource(FileListView, '/filelist')使用 flask_restful 来驱动，并封装数据成 {“value”：“”， “label”：“”} 的形式，用于 VUE 前台渲染时使用。
接下来，我们在前端代码中，创建一个 index.vue 文件，添加一个下拉框控件
<template>
<div>
<el-select id="file" v-model='fname' filterable placeholder="选择已有" v-on:focus="getData()">
<el-option
v-for="item in files"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<input type="hidden" name="middata" id="middata">
</div>
</template>我们加了一个 select 组件，并使用 element UI 官方的方法来渲染数据，即： v-for="item in files" :key="item.value" :label="item.label" :value="item.label" 机智的你可能注意到了 v-on:focus="getData()"，这个是当输入下拉框组件获取焦点时，会再次调用 getData 函数，用来更新数据。
下面我们再看下 script 部分
<script>
import dealdata from '../../api/data.js'
export default {
data() {
return {
depatment:'',
files:[],
vals:0,
fname: '',
//fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
}
},
mounted() {
this.getData();
},
methods: {
getData:function(){
dealdata.getfile()
.then(res => {
if(res.data.code == 200) {
if (res.data.data.length == 0){
this.files = []
}else{
this.files = res.data.data;
}
}else{
console.log("API 调用错误");
}
})
.catch(function(error){
console.log("网络错误");
})
}
}
}
</script>定义了 getData 这个函数，用于调用后台 API
可以看到，我这里是使用 dealdata =>（import dealdata from '../../api/data.js'） 来处理网络请求的，这其实就是一个封装好了的 axios，这样每次调用网络 API 时就方便很多了。
下面我们就来看看当前的效果：
上方的两个 button 先忽略，我们后面再添加
选择时的效果：
下拉框的数据，当然就是 PY_DIR 中的文件名啦。
上传文件
一样的，我们要先有个 API 接口
from flask import request
class UploadandSaveFileView(Resource):
def post(self):
if request.method == 'POST':
f = request.files['file']
# file_name = secure_filename(f.filename)
# f.save(PYTEST_DIR + '\\' + file_name)
f.save(os.path.join(PY_DIR, f.filename))
return {"code": 201, "content": "upload success"}
api_data.add_resource(UploadandSaveFileView, '/upload')感兴趣的同学可以试试 secure_filename 函数，看看保存出来的文件名有什么区别。
接下来我们添加组件到页面
<el-upload
class="upload-demo"
accept=".xlsx"
ref="upload"
action="http://127.0.0.1:9980/api/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="handleError"
:limit="1"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件<i class="el-icon-upload el-icon--right"></i></el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">选择用例文件，只支持上传xlsx格式</div>
</el-upload>使用 element UI 提供的原生组件 el-upload，其中有些属性还是要好好理解的。 action：就是上传的地址 on-preview：点击已经上传的文件时调用 on-success：文件上传成功时调用 其余的属性和方法等，大家可以到官网上查看，都写的很清楚了。
下面我们看看 script 部分，在 methods 部分添加函数
submitUpload() {
if(file.name = ' '){
this.$message.warning(`请选择一个文件`)
}
else{
this.$refs.upload.submit(file.name);
console.log("Submit");}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
console.log(file.name);
},
handleSuccess(file) {
this.$message.success(`上传成功`);
this.$refs.upload.clearFiles();
},
handleError(file) {
this.$message.error(`上传失败`);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制只能选择 1 个文件`);
}submitUpload 函数直接调用原生的 submit 方法，把文件上传到我们配置的地址上，它绑定的对象为 “上传到服务器” 这个 button 的点击事件。 handleSuccess 函数则时清空的已上传的文件列表。
这样，我们就完成了上传文件到服务器的功能，并且每次下拉列表里展示的文件，都是最新的文件列表哦。