vue3上传图片，以及nodejs接口处理

nodejs学习

• 1、express & nodejs & mysql 新建项目
• 2、nodejs尝试登陆接口
• 3、nodejs的前端项目搭建以及登陆接口开发
• 4、前端上传图片formdata格式,后端接口处理
• 5、vue+nodejs双表联动
• 6、nodejs插件knex & 日志打印
• 7、vue3+nodejs基于RSA加密的身份认证
• 前端代码地址(不完全功能)
• 后端代码地址(不完全功能)

效果

• 上传以及获取列表
  
• 删除
  

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
  }
})