vue小记——上传图片小组件

个人笔记

前端:

javascript 复制代码
<template>
    <el-upload
              class="avatar-uploader"
              name="image"
              action="http://127.0.0.1:3000/api/image/upload"
              :show-file-list="false"
              :headers="headerObj"
              :data="DataForm"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
export default{
    date(){
        return:{
            headerObj: {
                Authorization: localStorage.getItem("mytoken"),
            },
            imageUrl:"",
            DataForm: {},
        }
    },
    methods:{
     //控制图片预览窗口的显示与隐藏
        beforeAvatarUpload(file) {
          this.DataForm = {
            code: this.ruleForm.code,
            user: this.$store.getters.user.name,
            };
          console.log(this.DataForm);
          console.log(file.type);
          const isJPG = file.type === "image/jpeg";
          const isPNG = file.type === "image/png";
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!(isJPG || isPNG)) {
            this.$message.error("上传头像图片只能是 JPG 格式!");
          }
          if (!isLt2M) {
            this.$message.error("上传头像图片大小不能超过 2MB!");
          }
          return (isPNG || isJPG) && isLt2M;
        },
        handleAvatarSuccess(res, file) {
          if (res.status == "1") return this.$message.error(res.message);
          this.imageUrl = res.imageUrl;
          this.$message.success("修改头像成功");
          console.log(this.DataForm);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
    },
    }
}

</script>

后端(node.js):

router:

javascript 复制代码
const express= require('express')
const router=express.Router()
const imageHandler=require('../router_handler/images.js')
const multer=require('multer')

//磁盘存储引擎,可以控制文件的存储,省略的话这些文件会保存在内存中,不会写入磁盘
const storage=multer.diskStorage({
    destination:(req,res,cb)=>{
        //控制文件的存储路径
        cb(null,'public/images')
    },
    filename:function(req,file,cb){
        cb(null,file.fieldname + '-' + Date.now() + '-' + file.originalname)
    }
})
const upload=multer({storage:storage})

router.post('/upload',upload.single('image'),imageHandler.upload)

module.exports=router

router_handler:

javascript 复制代码
const db = require("../db/index");

const imageHandler = {
  upload: (req, res) => {
    const sql = 'update proj set image=? where code=? and user=?;'

    const imageUrl = `http://127.0.0.1:3000/images/${req.file.filename}`
    // console.log(avatarUrl);
    // 执行sql语句
    db.query(sql, [imageUrl, req.body.code,req.body.user], (err, results) => {
        // sql语句执行错误
        if(err) return res.cc(err)
        // sql语句执行成功,但影响的条数部位1属于执行失败
        if(results.affectedRows !== 1) return res.cc('上传图片失败!')
        // 更换头像成功
        res.json({
          msg:'上传成功',
          imageUrl:imageUrl
        })

    })
  },
};

module.exports = imageHandler;

一定要加上这句

javascript 复制代码
app.use(express.static('public'))
相关推荐
whysqwhw4 分钟前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw6 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖8 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi44 分钟前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang1 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
程序员码歌2 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
服务端技术栈2 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新2 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
yanlele2 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试