前端文件上传及后端接收（el-upload标签的使用）_el upload上传文件,后端怎么接收

一、前端上传

前端主要使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 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'
					}
				}
			},
1
2
3
4
5
6
7
8
9
10
11
12

• method方法代码：

• fileList存放上传的文件列表

• headers设置请求头

methods: {
   
				handleChange(file, fileList) {
    //文件数量改变
					this.fileList = fileList;
				},

				confirmUpload() {
    //确认上传
					var param = new FormData();
					this.fileList.forEach(
						(val, index) => {
   
							param.append("file", val.raw
1
2
3
4
5
6
7
8
9
10
11
12
13