Skip to content
This repository has been archived by the owner on Nov 15, 2018. It is now read-only.

Commit

Permalink
feat: (#412) 个人主页点击banner更换背景
Browse files Browse the repository at this point in the history
  • Loading branch information
mutoe committed Jun 20, 2018
1 parent 481f7fc commit 42bd1aa
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 70 deletions.
14 changes: 14 additions & 0 deletions src/api/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,3 +197,17 @@ export function refreshCurrentUserInfo() {
}
);
}

/**
* 上传用户主页背景图
* @author mutoe <[email protected]>
* @param {File} file 图像文件
*/
export function uploadUserBanner(file) {
const formData = new FormData();
formData.append("image", file);
return api.post(`/user/bg`, formData, {
headers: { "Content-Type": "multipart/form-data" },
validateStatus: s => s === 204
});
}
72 changes: 66 additions & 6 deletions src/page/UserHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@
class="m-urh-banner"
:style="bannerStyle">
<div class="m-box-model m-aln-center m-justify-end m-pos-f m-urh-bg-mask">
<label class="banner-click-area">
<input
type="file"
ref="imagefile"
class="m-rfile"
:accept="accept"
@change="onBannerChange" />
</label>
<avatar :user="user" size="big" />
<h3>{{ user.name }}</h3>
<p>
Expand Down Expand Up @@ -140,7 +148,12 @@ import HeadRoom from "headroom.js";
import wechatShare from "@/util/wechatShare.js";
import { startSingleChat } from "@/vendor/easemob";
import { followUserByStatus, getUserInfoById } from "@/api/user.js";
import { checkImageType } from "@/util/imageCheck.js";
import {
followUserByStatus,
getUserInfoById,
uploadUserBanner
} from "@/api/user.js";
export default {
name: "user-home",
Expand Down Expand Up @@ -177,11 +190,20 @@ export default {
startY: 0,
dragging: false,
updating: false,
bannerStyle: [
this.userBackGround,
this.paddingTop,
{ transitionDuration: this.dragging ? "0s" : "300ms" }
],
accept: {
type: [Array, String],
default() {
return [
"image/gif",
"image/jpeg",
"image/webp",
"image/jpg",
"image/png",
"image/bmp"
];
}
},
typeFilter: null,
showFilter: false,
Expand Down Expand Up @@ -250,6 +272,13 @@ export default {
feedsCount() {
return this.extra.feeds_count || 0;
},
bannerStyle() {
return [
this.userBackGround,
this.paddingTop,
{ transitionDuration: this.dragging ? "0s" : "300ms" }
];
},
userBackGround() {
const ubg = this.user.bg;
return ubg ? { "background-image": `url("${ubg}")` } : {};
Expand Down Expand Up @@ -383,6 +412,27 @@ export default {
this.fetchUserFeed();
this.fetchUserTags();
},
onBannerChange() {
const $input = this.$refs.imagefile;
const file = $input.files[0];
checkImageType([file])
.then(() => {
uploadUserBanner(file)
.then(() => {
this.$Message.success("更新个人背景成功!");
this.fetchUserInfo();
})
.catch(({ response: { data } = {} }) => {
console.warn(data);
this.$Message.error(data.message);
});
})
.catch(() => {
this.$Message.info("请上传正确格式的图片文件");
$input.value = "";
});
},
onScroll: _.debounce(function() {
this.scrollTop = Math.max(
0,
Expand Down Expand Up @@ -612,4 +662,14 @@ export default {
transition: transform 0.3s ease;
}
}
.banner-click-area {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
</style>
66 changes: 2 additions & 64 deletions src/page/post/components/ImageList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
:key='img.src'
v-for='(img, index) in pics'
class="m-box-center m-box-center-a image-wrap"
:class="[picClass, { error: img.error }, { loading: img.loading }, {edit}]"
>
:class="[picClass, { error: img.error }, { loading: img.loading }, { edit }]">
<div class="image-placeholder"></div>
<img
:id="`compose-photo-${img.id}`"
Expand Down Expand Up @@ -74,69 +73,8 @@ import bus from "@/bus.js";
import { mapActions } from "vuex";
import sendImage from "@/util/SendImage.js";
import ImagePaidOption from "./ImagePaidOption.vue";
/**
* ReadAsArrayBuffer
* 通过文件头判断文件格式
* @author jsonleex <[email protected]>
* @param {[type]} file
* @return {[type]}
*/
function readAsArrayBuffer(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onloadend = event => {
const uint8 = new Uint8Array(event.target.result).subarray(0, 4);
let res = "";
for (let i = 0; i < uint8.length; i++) {
res += uint8[i].toString(16);
}
import { checkImageType } from "@/util/imageCheck.js";
let mimeType = "";
switch (res) {
case "89504e47":
mimeType = "png";
break;
case "47494638":
mimeType = "gif";
break;
case "52494646":
mimeType = "webp";
break;
default:
res.indexOf("424d") === 0
? (mimeType = "bmp")
: res.indexOf("ffd8ffe") === 0 && (mimeType = "jpeg");
}
file.mimeType = mimeType;
resolve(mimeType);
};
reader.readAsArrayBuffer(file);
});
}
/**
* Check image types
* @author jsonleex <[email protected]>
* @param {[type]} files
* @return {[type]}
*/
function checkImageType(files) {
return new Promise((resolve, reject) => {
const exts = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
const blobs = [];
for (let index = 0; index < files.length; index++) {
const fileName = files[index].name.split(".");
if (fileName.length > 1) {
const ext = fileName.pop().toLowerCase();
exts.indexOf(ext) < 0
? reject(new Error("不支持的文件格式"))
: (files[index].mimeType = ext);
} else {
blobs.push(readAsArrayBuffer(files[index]));
}
}
resolve(files);
});
}
export default {
name: "image-list",
components: {
Expand Down
63 changes: 63 additions & 0 deletions src/util/imageCheck.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/**
* ReadAsArrayBuffer
* 通过文件头判断文件格式
* @author jsonleex <[email protected]>
* @param {[type]} file
* @return {[type]}
*/
export function readAsArrayBuffer(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onloadend = event => {
const uint8 = new Uint8Array(event.target.result).subarray(0, 4);
let res = "";
for (let i = 0; i < uint8.length; i++) {
res += uint8[i].toString(16);
}

let mimeType = "";
switch (res) {
case "89504e47":
mimeType = "png";
break;
case "47494638":
mimeType = "gif";
break;
case "52494646":
mimeType = "webp";
break;
default:
res.indexOf("424d") === 0
? (mimeType = "bmp")
: res.indexOf("ffd8ffe") === 0 && (mimeType = "jpeg");
}
file.mimeType = mimeType;
resolve(mimeType);
};
reader.readAsArrayBuffer(file);
});
}
/**
* Check image types
* @author jsonleex <[email protected]>
* @param {[type]} files
* @return {[type]}
*/
export function checkImageType(files) {
return new Promise((resolve, reject) => {
const exts = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
const blobs = [];
for (let index = 0; index < files.length; index++) {
const fileName = files[index].name.split(".");
if (fileName.length > 1) {
const ext = fileName.pop().toLowerCase();
exts.indexOf(ext) < 0
? reject(new Error("不支持的文件格式"))
: (files[index].mimeType = ext);
} else {
blobs.push(readAsArrayBuffer(files[index]));
}
}
resolve(files);
});
}

0 comments on commit 42bd1aa

Please sign in to comment.