<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
import axios from 'axios'
// 添加请求头
update (e) { // 上传照片
var self = this
let file = e.target.files[0]
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', file, file.name) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据
console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 添加请求头
axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
.then(response => {
if (response.data.code === 0) {
self.ImgUrl = response.data.data
}
console.log(response.data)
})
}
/*
http://172.19.26.60:8081/rest/user/headurl这里是你的服务器接口地址
*/
<html>
<head>
<title>mayouchen</title>
</head>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
function uploadpic(e){
var self = this
console.log(e.target);
let file = e.target.files[0]
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', file, file.name) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据
console.log("222222");
console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 添加请求头
axios.post('http://xingchen.mengdian.com/rest/user/headurl', param, config)
.then(response => {
console.log("222222");
if (response.data.code === 0) {
console.log(response.data.data);
}
console.log(response.data)
})
}
</script>
<body>
<div class='form-div'>
<div class="up-pic">
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" onclick="uploadpic(event)"/>
</div>
</div>
</body>
</html>
第二种：
import axios from 'axios';
// 存储文件对象的List
const tempFiles = [图片1, 图片2, 文件1, 文件2];
// 构建FormData对象,通过该对象存储要上传的文件
const formData = new FormData();
// 遍历当前临时文件List,将上传文件添加到FormData对象中
tempFiles.forEach((item) => formData.append('file', item.file));
// 调用后端接口,发送请求
const res = await axios.post('/后台的接口地址', formData, {
// 因为我们上传了图片,因此需要单独执行请求头的Content-Type
headers: {
// 表示上传的是文件,而不是普通的表单数据
'Content-Type': 'multipart/form-data'
}
})
?