nodejs学习
效果
- 上传以及获取列表
- 删除
1、前端实现
<template>
<div>
<el-form :model="state.ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="pic kinds" prop="kinds">
<el-input v-model="state.ruleForm.kinds" style="width:300px"></el-input>
</el-form-item>
<el-form-item label="pic path" prop="img">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="1"
:on-exceed="handleExceed"
:on-change="uploadPreview"
>
<template #default>
<el-icon>
<plus />
</el-icon>
</template>
<template #file="{ file }">
<div>
<el-avatar
shape="square"
:size="146"
fit="cover"
:src="file.url"
@click="handlePictureCardPreview"
></el-avatar>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon>
<zoom-in />
</el-icon>
</span>
<span
v-if="!state.disabled"
class="el-upload-list__item-delete"
@click="handleRemove()"
>
<el-icon>
<delete />
</el-icon>
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">Create</el-button>
</el-form-item>
<el-dialog v-model="state.dialogVisible">
<img style="width:100%" :src="state.dialogImageUrl" />
</el-dialog>
</el-form>
<el-table :data="state.tableData" border style="width: 100%">
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="path" label="Path">
<template #default="scope">
<img
:src="'http://localhost:3000//' + scope.row.path"
style="display:block;width: 100px;height:100px"
/>
</template>
</el-table-column>
<el-table-column label="Operations" width="120">
<template #default="scope">
<el-button
type="text"
size="small"
@click.prevent="deleteRow(scope.row.id)"
>
<el-icon>
<delete />
</el-icon>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang='ts'>
import { defineComponent, reactive, } from 'vue'
import { uploadorder, uploadlist ,deleteupload} from '../utils/api'
import { throttle } from '../utils/util'
import {
ElMessage, ElDialog
} from 'element-plus';
import { Plus, Delete, ZoomIn } from '@element-plus/icons'; // svg图标
export default defineComponent({
name: 'login',
components: {
Plus, ZoomIn, Delete, ElMessage, ElDialog
},
setup() {
let state = reactive({
ruleForm: {
kinds: '',
img: '',
},
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
tableData: [],
filelist:[]
})
const getorder = async () => {
uploadorder().then(res => {
if (res.code === 200) {
state.tableData = res.list
}
})
}
const submittemp = async () => {
if (state.ruleForm.kinds && state.ruleForm.img) {
let formdata = new FormData()
formdata.append('kinds', state.ruleForm.kinds);
formdata.append('img', state.ruleForm.img);
uploadlist(formdata).then(res => {
if (res.code === 200) {
state.ruleForm.kinds = ''
handleRemove();
getorder();
ElMessage.success(res.msg);
} else {
ElMessage.error(res.msg);
}
})
} else {
return ElMessage.error('名称及照片不能为空!')
}
}
const submitForm = throttle(submittemp, 1000)
const uploadPreview = function (file,fileList) {
state.filelist = fileList
state.ruleForm.img = file.raw
}
const handlePictureCardPreview = function (file) {
state.dialogImageUrl = file.url
state.dialogVisible = true
}
const handleRemove = function () {
state.filelist.splice(0,1)
state.ruleForm.img = ''
}
const handleExceed = function () {
ElMessage.warning('The limit is 1')
}
const deleteRow = function(id) {
deleteupload({id}).then(res => {
if (res.code === 200) {
getorder();
ElMessage.success(res.msg);
} else {
ElMessage.error(res.msg);
}
})
}
getorder()
return {
state,
uploadPreview,
submitForm,
handleRemove,
handleExceed,
deleteRow,
handlePictureCardPreview
}
}
})
</script>
<style lang='less'>
.el-form-item__content {
flex: none;
}
</style>
2、后端实现
安装插件 formidable
npm install formidable
var express = require('express');
var router = express.Router();
var db = require('../utils/dbserver')
const formidable = require('formidable'); //处理含有文件上传的表单
const path = require('path');
const fs = require('fs');
const {Success,MError} = require('../utils/result')
router.get('/login',async (req,res,next)=>{
// xxx
})
module.exports = router;
- 上传照片
const moveFile = async (req) => {
const formObj = new formidable.IncomingForm(); // 新建form对象
formObj.encoding = 'UTF-8'; // UTF8编码
formObj.uploadDir = "./tempDir"; // 接收的文件缓存路径
return new Promise((resolve, reject) => {
formObj.parse(req, (err, fields, files) => {
if(!files.img){
resolve({
body: fields,
fileName:''
});
return;
}
let fileObj = files.img;
let oldPath = fileObj['filepath'];
let fileName = fileObj.newFilename + path.extname(fileObj['originalFilename']);
let newPath = "public/uploads/banner/" + fileName;
fs.rename(oldPath, newPath, (err) => { // 挪动
if (err) {
resolve(false);
} else {
resolve({
body: fields,
fileName: "/uploads/banner/" + fileName
});
}
});
});
})
}
router.post('/uploadlist',async (req,res,next)=>{
const resdata = await moveFile(req)
console.log(resdata);
if(!resdata){
res.send(MError('上传失败!'))
return
}else{
let result = await db.insert('upload',{
name: resdata.body.kinds,
path:resdata.fileName
})
if(result){
res.send(Success(result));
return
}else{
res.send(MError('上传失败!'))
return
}
}
})
- 获取照片列表
router.get('/uploadorder',async (req,res,next)=>{
const result = await db.select(`SELECT * FROM upload`)
res.send(Success(result));
})
- 删除照片
router.post('/deleteupload',async (req,res,next)=>{
let {id} = req['body']
if(!id){
res.send(MError('查找图片失败,稍后再试'))
return
}
const result = await db.select(`SELECT * FROM upload WHERE id = '${id}'`)
if(result){
const finalres = await db.delete(`DELETE FROM upload WHERE id = '${id}'`)
if(finalres){
res.send(Success(result));
return
}else{
res.send(MError('删除失败,稍后再试'))
return
}
}else{
res.send(MError('未查到该图片,稍后再试'))
return
}
})