大家好，又见面了，我是你们的朋友全栈君。
1、用js的formData对象上传（服务器返回url地址）
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
methods: {
update(e){
let file = e.target.files[0];
let param = new FormData(); //创建form对象
param.append('file',file);//通过append向form对象添加数据
console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
}; //添加请求头
axios.post('http://127.0.0.1:8081/upload',param,config)
.then(response=>{
console.log(response.data);
})
}
}
2、Form表单上传（服务器返回url地址）
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>
data: {
name: '',
age: '',
file: ''
},
methods: {
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
if (response.status === 200) {
console.log(response.data);
}
})
}
}
注意：表单form加上属性enctype=”multipart/form-data”。客服端发送的头部就是：
Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面这个是浏览器假的随机值提交成功客服端还能看到以下图片相关内容：
3、获取相机图片的base64
/**
* 获取用户拍照的图片信息
*/
async Photograph() {
// 获取用户拍照的图片名字，显示到页面上
this.fileName = this.$refs.photoref.files[0].name;
// 获取图片base64 代码，并存放到 base64ImgData 中
this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);
},
/**
* 返回用户拍照图片的base64
*/
FileReader(FileInfo) {
// FileReader 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
let reader = new FileReader();
// readAsDataURL 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
reader.readAsDataURL(FileInfo);
// 监听读取操作结束
/* eslint-disable */
return new Promise(
resolve => (reader.onloadend = () => resolve(reader.result))
);
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/151185.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
