前端上传到七牛云图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style scoped lang="scss">
.home-van-cell {
background-color: #fff;
overflow: hidden;
padding: 1.25rem 0.6875rem 1.25rem 0.703125rem;
.home-van-cell__title {
float: left;
padding-top: 1.34375rem;
span {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
}
.home-van-cell__value {
float: right;
img {
width: 4.0625rem;
height: 4.0625rem;
border-radius: 50%;
}
.hiddenInput {
display: none;
}
}
}
</style>
</head>
<body>
<div class="home-van-cell">
<div class="home-van-cell__title">
<span>我的头像</span>
</div>
<div class="home-van-cell__value">
<div class="head_img" @click.stop="uploadHeadImg">
<img :src="avatar" />
</div>
<input type="file" accept="image/*" @change="handleFile" ref="hiddenInput" class="hiddenInput" />
</div>
</div>
<script>
export default {
data() {
return {
phone: "",
verifycode: "",
codeText: "获取验证码",
disabledCodeBtn: true,
}
},
methods: {
uploadHeadImg: function () {
this.$refs.hiddenInput.click();
},
// 将头像显示
handleFile: function (e) {
let $target = e.target || e.srcElement;
let file = $target.files[0];
var reader = new FileReader();
reader.onload = data => {
let res = data.target || data.srcElement;
this.avatar = res.result;
};
return new Promise((resolve, reject) => {
alert("上传中...");
let splitArray = file.name.split(".");
let current = moment()
.format("YYYYMMDD")
.toString(),
prefix = moment(file.lastModified)
.format("HHmmss")
.toString(),
suffix =
new Date().getTime() + "." + splitArray[splitArray.length - 1],
key = encodeURI(`${current}/${prefix}_${suffix}`);
// 七牛云接口
getUpToken({
key
})
.then(res => {
let data = new FormData();
data.append("token", res.data.uptoken);
data.append("key", key);
data.append("file", file);
// 上传到七牛云返回图片路径
axios({
url: "//upload.qiniup.com",
method: "POST",
data: data,
headers: {
F "Content-Type": "multipart/form-data"
}
}).then(res => {
alert("上传成功...");
this.avatar = res.data.domain + res.data.truekey;
});
})
.catch(error => {
// console.log(error);
alert("上传成功");
reject(error);
});
});
}
}
}
</script>
</body>
</html>
