vue + multer+mongodb實現文字加圖片上傳功能
阿新 • • 發佈:2019-01-08
前端程式碼:
<template> <div> <form name="fileinfo" id="myForm"> 標題: <input type="text" name="title" v-model="formData.title"> 內容: <input type="text" name="content" v-model="formData.content"> <input type="file" name="files" multiple> <button class="btn btn-default" @click="upload" type="button">提交</button> </form> </div> </template> <script> export default { data() { return { formData: {} }; }, methods: { upload() { //獲取表單資料 var form = document.forms.namedItem("fileinfo"); var form = document.getElementById("myForm"); //建立表單物件,並新增資料 //使用這種方法建立的表單後臺必須有相應的設定,我後面設定的是(upload.array('files',10)),否則無法 獲取資料 var sumData = new FormData(form); //新增使用者名稱 sumData.append("userName", "userInfo.userName"); const head = { header: { "Content-type": "multipart/form-data" } }; this.axios .post("/user/addFun", sumData, head) .then(res => { if (res.data.status == "success") { this.formData = {}; console.dir("成功"); } else { console.log("失敗"); } }) .catch(err => { console.log(err); }); } } }; </script> <style lang="less" scoped> </style>
前端程式碼注意事項:
1、表單中的input標籤中的name屬性是你需要提交到後臺的欄位名,比如我這裡提交的欄位名為 title、content、和files(檔案)
2、獲取表單資料:var form = document.getElementById("myForm");
3、建立表單物件,新增表單資料:var sumData = new FormData(form);
4、設定請求的格式為form-data.
const head = { header: { "Content-type": "multipart/form-data" } };
5、傳送請求(這裡的介面自己寫,我就不簡述了)
this.axios .post("/user/addFun", sumData, head) .then(res => { if (res.data.status == "success") { this.formData = {}; console.dir("成功"); } else { console.log("失敗"); } }) .catch(err => { console.log(err); });
這裡res.data.status中的status是我後臺自定義的一個變數,請根據自己的實際情況修改。
前端程式碼完畢,接下來看後臺程式碼。
後臺程式碼:
這裡我使用的是模組化開發,下面是不同模組檔案
後臺使用node實現
1、配置multer
直接上程式碼:
multer.js模組(配置上傳檔案)
const multer = require('multer')
const date = new Date()
const storage = multer.diskStorage({
//函式方式設定路徑,必須先建立資料夾
// destination: function (req, file, cb) {
// const date = new Date()
// const year = date.getFullYear()
// const month = date.getMonth() + 1
// cb(null, 'public/upload/images')
// },
//路徑直接給字串可以先不用建立檔案,multer自動建立
//根據日期建立,防止資料夾達到最大數量的檔案
destination: 'public/upload/' + 'images_' + date.getFullYear() + '_' + (date.getMonth() + 1),
// 給上傳檔案重新命名,獲取新增字尾名
filename: function (req, file, cb) {
console.log("後臺檔案");
console.log(file)
const arry = file.originalname.split(".")
const length = arry.length
const newName = arry[0] + Date.now() + '.' + arry[length - 1]
console.log("新名稱");
console.log(newName);
cb(null, newName)
}
});
const upload = multer({
storage: storage
});
module.exports = upload
2、路由模組
router.js
const express = require('express')
const router = express.Router()
const upload = require('../utils/multer')
//資料庫物件
const Fun = require('../lib/mongodb/controller/fun')
router.post('/user/addFun', upload.array('files', 20), Fun.addFun) //路由
module.exports = router
這裡的Fun是資料庫的操作
multer中多個檔案上傳使用array()
3、資料操作
fun.js (controller)
//這裡是匯入mongoose資料模型
const FunModuls = require('../models/Fun')
class Fun {
constructor() {
}
async addFun(req, res, next) {
//文字資料
const body = req.body
//檔案陣列
const files = req.files
//接收檔名的陣列
const images = []
//對圖片進行處理
const isImage = 1;
try {
if (files) {
for (var i = 0; i < files.length; i++) {
if (!(files[i].mimetype == 'image/jpeg' || files[i].mimetype == 'image/jpg' || files[i].mimetype == 'image/png' || files[i].mimetype == 'image/gif')) {
isImage = 0;
break;
}
}
if (!isImage) { //存在一張不符合就返回錯誤資訊
res.send({
status: 'error',
message: '圖片格式錯誤'
})
} else { //格式全部正確,將檔案路徑儲存到陣列中,後面存入資料庫
files.forEach(item => {
const fileName = 'public/upload/images_' + date.getFullYear() + '_' + (date.getMonth() + 1) + '/'
images.push(fileName + item.filename)
})
}
}
//新增圖片到傳入資料庫的物件中
body.photo = images;
await FunModuls.create(body)
res.send({
status: 'success',
message: '新增成功'
})
} catch (err) {
console.log(err)
res.send({
status: 'error',
message: '輸入資料格式有誤,請重新整理後重新輸入'
})
}
}
}
module.exports = new Fun()
基本思路就是這樣,如果對mongoose不熟悉的小夥伴可能看著這裡比較迷茫。
歡迎討論和指出錯誤,覺得對你有幫助的小夥伴點個贊