2017年7月14日19:21:29 ，最近做個網(wǎng)站筋量，需要有用戶頭像裁剪上傳功能烹吵，具體流程是用戶在本地選擇圖片，前端將圖片裁剪好發(fā)給后端桨武，后端接收到圖片將它保存起來肋拔，并將信息存入數(shù)據(jù)庫。
先說一下環(huán)境后端是express呀酸，前端是vue-cli2.0 做的單文件網(wǎng)站凉蜂。
模塊選用：前端用 vue-image-crop-upload^1.3.14 后端用multer^1.3.0"，數(shù)據(jù)庫mysql,在這里不是重點省去性誉。
首先請安裝這兩個模塊窿吩，然后上代碼了：
前端代碼：
<pre><code>
<template>
<div id="imgUp">
<my-upload field="avatar" /field是后端接收文件用的name/
v-model="show"
@crop-success="cropSuccess" /一些鉤子函數(shù)/
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:width="200" /最終裁剪出來的圖片的大小/
:height="200"
url="/api/profile"/后端服務(wù)地址/
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 類型的表單數(shù)據(jù),所以在找前端模塊的時候有點擔(dān)心，然后查看了vue-image-crop-upload的代碼羞海，發(fā)現(xiàn)作者用的是formDate打包的文件,然后用XMLHttpRequest上傳的忌愚，這樣處理兩個模塊就兼容了，無需擔(dān)心扣猫。
