APP
上傳圖片是很常見(jiàn)的功能
但是這個(gè)功能有點(diǎn)挑戰(zhàn)
要處理好：1.前端圖片上傳，2.后臺(tái)接收?qǐng)D片，3.后臺(tái)保存圖片，4.將保存地址返回給前端，前端回顯圖片。
有不懂的同學(xué)可以咨詢我微信號(hào)yizheng369
另外一份html+node參考源碼：??https://gitee.com/618859/picture-upload-node??
效果
將電腦選擇的文件圖片預(yù)覽：URL.createObjectURL(file.raw)
vue前端代碼
注意：前端此處用了??element-ui??框架
sureFun() {
// 準(zhǔn)備上傳文件數(shù)據(jù)
var formData = new FormData();
formData.append("file", this.activeTopImg);
formData.append("name", '圖片名稱');
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$axios
.post("/api/fileUpload", formData, config)
.then((res) => {
console.log("提交:", res);
this.$message({
message: "提交成功",
type: "warning",
});
// 重新獲取數(shù)據(jù)
// this.getData();
})
.catch((err) => {
console.log("出錯(cuò)", err);
this.$message({
message: "服務(wù)器出錯(cuò)!",
type: "error",
});
});
},node的express后臺(tái)
// -------------- 圖片文件上傳處理 start --------------------
var Path = require('path')
// 讀取靜態(tài)資源
app.use(express.static('./'))
// 引入multer中間件，用于處理上傳的文件數(shù)據(jù)
const multer = require('multer')
// 通過(guò)配置multer的dest屬性， 將文件儲(chǔ)存在項(xiàng)目下的tmp文件中
app.use(multer({ dest: './tmp/' }).any())
//
// 文件上傳接口
app.post('/fileUpload', async function (req, res) {
// 上傳的文件在req.files中
console.log('接收到圖片上傳數(shù)據(jù):', req.body, req.files);
// 可能有多張圖片
let arr = req.files;
let allUrl = []
for (let i = 0; i < arr.length; i++) {
const filename = arr[i].destination + arr[i].originalname;
console.log('默認(rèn)名1：', arr[i].path);
console.log('改名：', filename);
// 修改圖片文件名
fs.renameSync(arr[i].path, filename)
console.log('改名成功：', i);
let str = Path.join(serverUrl,filename);
// window的路徑分割符 Path.sep 為反雙斜杠 \ 此處要改為 單斜杠 /
let url = str.split(Path.sep).join('/')
url = 'http://'+url
allUrl.push({
id: arr[i].fieldname,
url,
})
}
res.send(
{
msg: 'upload successfully',
allUrl
})
});
// -------------- 圖片文件上傳處理 end --------------------
祝你好運(yùn)！
不懂你會(huì)問(wèn)我嗎？
本文摘自 ：https://blog.51cto.com/u
