13 changed files with 367 additions and 76 deletions
@ -0,0 +1,9 @@ |
|||||
|
const el = document.getElementById("upload") |
||||
|
const placeholder = document.getElementById("upload-placeholder") |
||||
|
el.addEventListener("change", e => { |
||||
|
const file = e.target.files[0] |
||||
|
const url = URL.createObjectURL(file) |
||||
|
const html = `<div class="control" style="margin-right: 6px;"><div class="image is-128x128"><img class="is-rounded" src="${url}"></div></div>` |
||||
|
placeholder.innerHTML = html |
||||
|
placeholder.insertAdjacentHTML("afterend", "<div>---></div>") |
||||
|
}) |
Binary file not shown.
@ -0,0 +1,74 @@ |
|||||
|
// CREATE TABLE attachments (
|
||||
|
// id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
|
// filename VARCHAR(255) NOT NULL,
|
||||
|
// filepath VARCHAR(255) NOT NULL,
|
||||
|
// file_type VARCHAR(50) NOT NULL,
|
||||
|
// file_size INT NOT NULL,
|
||||
|
// created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
|
// updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
|
// );
|
||||
|
|
||||
|
import { Sequelize, DataTypes, Optional, Model } from "sequelize" |
||||
|
|
||||
|
interface AttachmentAttributes { |
||||
|
id: number |
||||
|
filename: string |
||||
|
filepath: string |
||||
|
file_type: string |
||||
|
file_size: number |
||||
|
|
||||
|
createdAt?: Date |
||||
|
updatedAt?: Date |
||||
|
} |
||||
|
|
||||
|
export interface AttachmentInput extends Optional<AttachmentAttributes, "id"> {} |
||||
|
export interface AttachmentOutput extends Required<AttachmentAttributes> {} |
||||
|
export type TAttachmentModel = ReturnType<typeof AttachmentModel> |
||||
|
|
||||
|
type DT = typeof DataTypes |
||||
|
export default function AttachmentModel(sequelize: Sequelize, DataTypes: DT) { |
||||
|
class Attachment extends Model<AttachmentAttributes, AttachmentInput> implements AttachmentAttributes { |
||||
|
public id!: number |
||||
|
public filename!: string |
||||
|
public filepath!: string |
||||
|
public file_type!: string |
||||
|
public file_size!: number |
||||
|
|
||||
|
// timestamps!
|
||||
|
public readonly createdAt!: Date |
||||
|
public readonly updatedAt!: Date |
||||
|
} |
||||
|
Attachment.init( |
||||
|
{ |
||||
|
id: { |
||||
|
type: DataTypes.INTEGER, |
||||
|
autoIncrement: true, |
||||
|
primaryKey: true, |
||||
|
}, |
||||
|
filename: { |
||||
|
type: DataTypes.STRING, |
||||
|
allowNull: false, |
||||
|
}, |
||||
|
filepath: { |
||||
|
type: DataTypes.STRING, |
||||
|
allowNull: false, |
||||
|
}, |
||||
|
file_type: { |
||||
|
type: DataTypes.STRING, |
||||
|
allowNull: false, |
||||
|
}, |
||||
|
file_size: { |
||||
|
type: DataTypes.INTEGER, |
||||
|
allowNull: false, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
modelName: "attachment", |
||||
|
sequelize, |
||||
|
underscored: true, |
||||
|
timestamps: true, |
||||
|
}, |
||||
|
) |
||||
|
|
||||
|
return Attachment |
||||
|
} |
@ -1,70 +1,89 @@ |
|||||
include @/helper/helper.pug |
include @/helper/helper.pug |
||||
|
include @/helper/flush.pug |
||||
|
|
||||
block var |
block var |
||||
-title=user.nickname || "Welcome" // 网页标题 |
-title=user.nickname || "Welcome" // 网页标题 |
||||
title #{user.nickname || "Welcome"} |
title #{user.nickname || "Welcome"} |
||||
|
|
||||
form(action="/upload" method="post" enctype="multipart/form-data" style="margin: 0 auto; width: 500px;") |
form(action="/user" method="post" enctype="multipart/form-data" style="margin: 0 auto; width: 500px;") |
||||
.field |
.field |
||||
.label 用户名 |
.label 用户名 |
||||
.control |
.control |
||||
input.input(type="text" name="username" placeholder="请输入用户名" value=user.username) |
input.input(type="text" name="username" placeholder="请输入用户名" value=user.username) |
||||
.field |
.field |
||||
|
.label 密码 |
||||
|
.control |
||||
|
input.input(type="password" name="password" placeholder="请输入密码") |
||||
|
.field |
||||
|
.label 昵称 |
||||
|
.control |
||||
|
input.input(type="text" name="nickname" placeholder="请输入昵称" value=user.nickname) |
||||
|
.field |
||||
|
.label 邮箱 |
||||
|
.control |
||||
|
input.input(type="email" name="email" placeholder="请输入邮箱" value=user.email) |
||||
|
.field |
||||
|
.label 手机号 |
||||
|
.control |
||||
|
input.input(type="tel" name="tel" placeholder="请输入手机号" value=user.tel) |
||||
|
.field |
||||
.label 头像 |
.label 头像 |
||||
.control |
.control |
||||
.file.is-primary |
.file.is-primary |
||||
label.file-label |
label.file-label |
||||
input.file-input(type="file", name="file") |
input.file-input(type="file" name="file" id="upload") |
||||
span.file-cta |
span.file-cta |
||||
span.file-label |
span.file-label |
||||
| 上传头像 |
| 上传头像 |
||||
if user.avatar |
div(style="display: flex;align-items:center;") |
||||
.field |
.field#upload-placeholder |
||||
.control |
if user.avatar |
||||
.image.is-128x128 |
.field |
||||
img.is-rounded(src=user.avatar alt=user.username) |
.control |
||||
|
.image.is-128x128 |
||||
|
img.is-rounded(src=user.avatar alt=user.username) |
||||
+security |
+security |
||||
.field.is-grouped |
.field.is-grouped |
||||
.control |
.control |
||||
button.button.is-link(type="submit") 提交 |
button.button.is-link(type="submit") 提交 |
||||
.control |
.control |
||||
button.button.is-link.is-light 取消 |
button.button.is-link.is-light 取消 |
||||
|
+script("js/page/user.js") |
||||
|
|
||||
|
//- form(action="", method="post" style="margin: 0 auto; width: 500px;margin-top:20px") |
||||
form(action="", method="post" style="margin: 0 auto; width: 500px;margin-top:20px") |
//- .field |
||||
.field |
//- .label 用户名 |
||||
.label 用户名 |
//- .control |
||||
.control |
//- input.input(type="text" placeholder="请输入用户名" value=user.username) |
||||
input.input(type="text" placeholder="请输入用户名" value=user.username) |
//- .field |
||||
.field |
//- .label 昵称 |
||||
.label 昵称 |
//- .control |
||||
.control |
//- input.input(type="text" placeholder="请输入用户名" value=user.nickname) |
||||
input.input(type="text" placeholder="请输入用户名" value=user.nickname) |
//- .field |
||||
.field |
//- .label 邮箱 |
||||
.label 邮箱 |
//- .control |
||||
.control |
//- input.input(type="email" placeholder="请输入邮箱" value=user.email) |
||||
input.input(type="email" placeholder="请输入邮箱" value=user.email) |
//- .field |
||||
.field |
//- .label 手机号 |
||||
.label 手机号 |
//- .control |
||||
.control |
//- input.input(type="tel" placeholder="请输入手机号" value=user.tel) |
||||
input.input(type="tel" placeholder="请输入手机号" value=user.tel) |
//- .field |
||||
.field |
//- .label 头像 |
||||
.label 头像 |
//- .control |
||||
.control |
//- .file.is-primary |
||||
.file.is-primary |
//- label.file-label |
||||
label.file-label |
//- input.file-input(type="file", name="file") |
||||
input.file-input(type="file", name="file") |
//- span.file-cta |
||||
span.file-cta |
//- span.file-label |
||||
span.file-label |
//- | 上传头像 |
||||
| 上传头像 |
//- if user.avatar |
||||
if user.avatar |
//- .field |
||||
.field |
//- .control |
||||
.control |
//- .image.is-128x128 |
||||
.image.is-128x128 |
//- img.is-rounded(src=user.avatar alt=user.username) |
||||
img.is-rounded(src=user.avatar alt=user.username) |
//- .field.is-grouped |
||||
.field.is-grouped |
//- .control |
||||
.control |
//- button.button.is-link(type="submit") 提交 |
||||
button.button.is-link(type="submit") 提交 |
//- .control |
||||
.control |
//- button.button.is-link.is-light 取消 |
||||
button.button.is-link.is-light 取消 |
|
||||
|
|
Loading…
Reference in new issue