一、前端上传
前端主要使用elementUI中的el-upload标签作为上传控件,通过axios发送post请求到后端,将文件上传到服务器中;需要注意的点:前端向后端发送的文件需要以formData格式存储,文件需要通过val.raw的方式将数据传给formData对象
- body标签代码:
<!-- 上传对话框 -->
<el-dialog title="上传" :visible.sync="dialogOfUpload" width="35%" style="text-align: center;">
<el-upload class="upload-demo" action="#" drag multiple :headers="headers" :auto-upload="false"
:file-list="fileList" :on-change="handleChange">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">上传Excel格式文件</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogOfUpload = false">取 消</el-button>
<el-button type="primary" @click="confirmUpload()">上 传</el-button>
</div>
</el-dialog>
-
action属性为上传的地址,这里用#号忽略了,使用axios发送请求;
-
headers为请求头,写死为
'Content-Type': 'multipart/form-data'
; -
auto-upload为是否自动上传,设置为false,关闭自动上传;
-
file-list为上传的文件列表,为数组的形式;
-
on-change,文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用;和handleChange函数绑定,文件变化时给fileList赋值,fileList通过这种方式获取值;
-
date数据代码:
data() {
return {
dialogOfUpload: false,
fileList: [],
headers: {
'Content-Type': 'multipart/form-data'
}
}
},
-
method方法代码:
-
fileList存放上传的文件列表
-
headers设置请求头
methods: {
handleChange(file, fileList) {
//文件数量改变
this.fileList = fileList;
},
confirmUpload() {
//确认上传
var param = new FormData();
this.fileList.forEach(
(val, index) => {
param.append("file"