vant+axios上传头像/文件
(引入封装好的axios)
·
上传头像记录一下!
body:
<template>
<div class="uploaderBox">
<!-- @delete="deleteClzp" 删除事件 -->
<van-uploader
class="imagetx"
:upload-text="'请上传头像'"
@oversize="onOversize"
:before-read="beforeRead"
:after-read="clzpAfterRead"
:max-count="1"
:max-size="5 * 1024 * 1024"
v-model="fileList"
>
</van-uploader>
</div>
</template>
js:
import http from “…/…/axios/index.js”;(引入封装好的axios)
//校验上传图片大小
onOversize(file) {
console.log(file);
this.$toast("文件大小不能超过5MB");
},
//校验图片的格式
beforeRead(file) {
if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
this.$toast("请上传正确格式的图片");
return false;
}
return true;
},
//照片上传事件方法
clzpAfterRead(file) {
// 上传状态提示开启
file.status = "uploading";
file.message = "上传中...";
// 创建一个空对象实例
let formData = new FormData();
// 调用append()方法添加数据
formData.append("file", file.file);
http({
url: "http://47.94.105.86:9001/api/user/v1/upload",
method: "POST",
data: formData,
headers: {
"content-type": "multipart/form-data",
},
}).then((res) => {
console.log(res);
if (res.code == "0") {
// 上传状态提示关闭
file.status = "done";
this.$toast("上传成功!");
this.clzpfilePath = res.data.relativePath; //删除所需参数
console.log(res.data);
this.fileList.url = res.data;
}
});
},
//照片删除事件方法
// deleteClzp() {
// // filePath:删除所需的参数 deleteFiles自定义的删除方法,调接口
// deleteFiles({ filePath: this.clzpfilePath }).then((res) => {
// if (res.code == "10000") {
// this.$toast("删除成功!");
// }
// });
// },
更多推荐
已为社区贡献1条内容
所有评论(0)