mysql 存储用户头像_node+vue用户头像处理上传并保存

妖狐艹你老母 2022-11-05 03:06 323阅读 0赞

2017年7月14日19:21:29 ，最近做个网站，需要有用户头像裁剪上传功能，具体流程是用户在本地选择图片，前端将图片裁剪好发给后端，后端接收到图片将它保存起来，并将信息存入数据库。

先说一下环境后端是express，前端是vue-cli2.0 做的单文件网站。

模块选用：前端用 vue-image-crop-upload^1.3.14 后端用multer^1.3.0"，数据库mysql,在这里不是重点省去。

首先请安装这两个模块，然后上代码了：

前端代码：

``

``

`v-model="show"`

``

`@crop-success="cropSuccess" /一些钩子函数/`

``

`@crop-upload-success="cropUploadSuccess"`

``

`@crop-upload-fail="cropUploadFail"`

``

`:width="200" /最终裁剪出来的图片的大小/`

``

`:height="200"`

``

`url="/api/profile"/后端服务地址/`

``

`img-format="png">`

``

``

``

``

`import myUpload from 'vue-image-crop-upload/upload-2.vue';`

``

`export default {`

``

`name: 'imgUp',`

``

`data(){`

``

`return{`

``

`show: false,`

``

`imgDataUrl: ''`

``

`}`

``

`},`

``

`components: {`

``

`'my-upload': myUpload`

``

`},`

``

`methods: {`

``

`toggleShow() {`

``

`this.show = !this.show;`

``

`},`

``

`cropSuccess(imgDataUrl, field){`

``

`this.imgDataUrl = imgDataUrl;`

``

`},`

``

`cropUploadSuccess(jsonData, field){`

``

`},`

``

`cropUploadFail(status, field){`

``

`}`

``

`}`

``

`}`

``

后端代码：

`var apiRouter = express.Router();`

``

`//4. 图片上传`

``

`var multer = require('multer')`

``

`var storage = multer.diskStorage({`

``

`destination: function (req, file, cb) {`

``

`cb(null, './uploads') /上传文件放入的路径，这个根路径是项目的根路径。/`

``

`},`

``

`filename: function (req, file, cb) {`

``

`var fileFormat = (file.originalname).split(".");`

``

`cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);`

``

`}`

``

`});`

``

`var upload = multer({`

``

`storage: storage`

``

`});`

``

`/upload.single('avatar')， avatar是图片的name/`

``

`apiRouter.post('/profile', upload.single('avatar'), function (req, res, next) {`

``

`if (req.file) {`

``

`res.send({res:"图片上传成功"})`

``

`}`

``

`});`

``

`app.use('/api', apiRouter);`

``

到此完成，这两个模块完美的融合在一起，不需要修改代码。Multer模块说只支持用于处理 multipart/form-data 类型的表单数据,所以在找前端模块的时候有点担心，然后查看了vue-image-crop-upload的代码，发现作者用的是formDate打包的文件,然后用XMLHttpRequest上传的，这样处理两个模块就兼容了，无需担心。

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关【探花交友】保存用户信息、上传用户头像、用户信息管理

文章目录 1.3、保存用户信息 1.4、上传用户头像 2、用户信息管理 2.1、查询用户资料 2.2、更新用户资料 1.3、保存用户信息 1.3.1、接口

谁借莪１个温暖的怀抱￠/ 2024年04月06日 10:25/ 0 赞/ 66 阅读

相关上传头像裁剪

<template> <div id="demo"> <van-nav-bar title="上传头像"

系统管理员/ 2022年11月21日 09:55/ 0 赞/ 281 阅读

相关 mysql 存储用户头像_node+vue用户头像处理上传并保存

2017年7月14日19:21:29 ，最近做个网站，需要有用户头像裁剪上传功能，具体流程是用户在本地选择图片，前端将图片裁剪好发给后端，后端接收到图片将它保存起来，并将信息存

妖狐艹你老母/ 2022年11月05日 03:06/ 0 赞/ 324 阅读

相关 vue裁剪并上传头像

之前，在用vue写一个上传头像的模块，里面需要对头像进行拖动裁剪设置,可是后台却跟我说他只要类似于input上传图片的内容。前端是没有办法操作本地图片的，一般也只能是传图片+裁

比眉伴天荒/ 2022年05月28日 12:37/ 0 赞/ 328 阅读

相关实现头像,文件上传

该文章来源于 [https://www.cnblogs.com/libo0125ok/p/7773898.html][https_www.cnblogs.com_libo0

电玩女神/ 2022年05月22日 13:09/ 0 赞/ 425 阅读

相关 uni-app修改头像并上传头像资源到服务器

前端小白的uni-app艰难学习之路功能要实现从本地相册或拍照获取图片，然后传给后台，后台返回保存后的图片地址实现这里首先我们要了解，通过uni-app

比眉伴天荒/ 2022年01月23日 23:25/ 0 赞/ 800 阅读

相关 Django用户头像上传

1 将文件保存到服务器本地 upload.html ? <table> <tbody> <tr> <td> <div> 1

╰+攻爆jí腚メ/ 2021年11月04日 17:48/ 0 赞/ 526 阅读

相关纳税服务系统【用户模块之日期组件、上传头像、编辑头像】

前言前面我们在写用户模块的时候还有一些没有解决掉的问题： ![这里写图片描述][SouthEast] 日期组件我们都知道Struts2仅仅只会自动封装yyy

╰半夏微凉°/ 2021年09月17日 06:50/ 0 赞/ 492 阅读

相关对象存储OSS之头像上传实现

学习完了OSS，我们来实现一个头像上传功能。基本思路就是在前端上传一个本地文件，点击上传按钮将其上传到阿里云服务器上，后台文件上传功能需要使用到OSS的API来实现。头像

我不是女神ヾ/ 2021年06月24日 13:58/ 1 赞/ 730 阅读

相关 ajax+springboot上传图片讲解(修改用户头像)

HTTP请求方法说明在讲解ajax请求实现前，我们先了解一下http常用的6个请求方法：方法功能说明 GET 向特定的资源发出请求，url会被标识在浏览器地址栏 ...

亦凉/ 2021年05月07日 20:35/ 0 赞/ 1284 阅读