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'))
相关推荐
泉城老铁2 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅2 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸3 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端
我是日安4 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia16 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙16 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院19 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记21 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92122 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada23 分钟前
详解 React useCallback & useMemo
前端·react.js