2017年7月14日19:21:29 ，最近做个网站，需要有用户头像裁剪上传功能，具体流程是用户在本地选择图片，前端将图片裁剪好发给后端，后端接收到图片将它保存起来，并将信息存入数据库。
先说一下环境后端是express，前端是vue-cli2.0 做的单文件网站。
模块选用：前端用 vue-image-crop-upload^1.3.14 后端用multer^1.3.0"，数据库mysql,在这里不是重点省去。
首先请安装这两个模块，然后上代码了：
前端代码：
<pre><code>
<template>
<div id="imgUp">
<my-upload field="avatar" /field是后端接收文件用的name/
v-model="show"
@crop-success="cropSuccess" /一些钩子函数/
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:width="200" /最终裁剪出来的图片的大小/
:height="200"
url="/api/profile"/后端服务地址/
img-format="png"></my-upload>
</div>
</template>
<script>
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){
}
}
}
</script>
<style lang="less">
</style>
</pre></code>
后端代码：
<pre><code>
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);
</code></pre>
到此完成，这两个模块完美的融合在一起，不需要修改代码。Multer模块说只支持用于处理 multipart/form-data 类型的表单数据,所以在找前端模块的时候有点担心，然后查看了vue-image-crop-upload的代码，发现作者用的是formDate打包的文件,然后用XMLHttpRequest上传的，这样处理两个模块就兼容了，无需担心。
