vue实现文件的上传

vue 文件上传相关代码（我们使用elementui 插件来实现）：

1.前端代码

<el-upload

　　class="upload-demo"

　　ref="upload"

　　drag

　　:multiple =false

　　action="/api/job/littleVersionUpload"

　　:auto-upload="false"

　　:file-list= selectedFiles

　　:on-remove="removeFile"

　　:on-change="changeFileState"

>

　　<i class="el-icon-upload"></i>

　　<div class="el-upload__text">将文件拖到此处，或<em>点击此处</em>选中</div>

　　<el-button size="small" type="success" @click.stop="submitUpload">上传到服务器</el-button>

</el-upload>

实现文件上传的是我们声明的submitUpload方法，

如果我们在submitUpload方法中使用this.$refs.upload.submit(),文件就会被提交到aciton所指定的位置，

但是如果我们不想在这里吧路径写死，想自己写文件提交接口的话，就可以按照如下方式进行提交：

在自定义接口中，

　　上传的文件fileData，要进行如下处理：

　　我们将其他需要传递的参数，通过param添加，或者通过config防止在请求头中也可以。

　　

　　let param = new FormData()

　　param.append('file',fileData)      //这里append中的file，是给文件，起的名字，后端通过该名字获取指定文件

　　let config={

　　　　headers:

　　　　{

　　　　　　'Content-Type': 'multipart/form-data',

　　　　　　'fileName':fileName     //这里吧文件名参数放在请求头中，用于后端获取文件名之后，将文件保存成同一个文件名。

　　　　}

　　}

　　return axiosObj.post(

　　　　'/apifileUpload',

　　　　param,

　　　　config

　　)

注意事项： 

　　这里的文件在发送post请求中，数据类型必须是binary，如果不是的话，那就是封装的数据有误，最常见的就是Object类型（这里是个大坑，被阻塞了好久）

　　

 

 

2.flask后端接受文件

　　fileName = request.headers.get('fileName')  #获取文件名

　　data = request.file('file')　　　　#获取文件数据

　　data.save("文件要保存的路径"+fileName)  #将文件保存到指定目录下。

　　

　　这个过程的执行时间与文件大小成正比。