mysql 存储用户头像_node+vue用户头像处理上传并保存
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上传的，这样处理两个模块就兼容了，无需担心。
谁借莪１个温暖的怀抱￠
系统管理员
╰+攻爆jí腚メ
亦凉
还没有评论，来说两句吧...