大家好,又见面了,我是你们的朋友全栈君。
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账号...