使用elementui及nodejs实现图片上传

单独使用文件上传

1.实现效果

2.图片上传模板

• class="avatar-uploader" 样式类名

• action="http://127.0.0.1:5000/upload" 上传路径地址(nodejs的地址)

• :show-file-list="true" 是否显示上传列表

• :on-success="handleAvatarSuccess" 上传成功的回调函数

• :before-upload="beforeAvatarUpload" 上传之前的回调函数【可以用于文件格式和大小的判断】

• :headers="headers" 携带headers头信息【用于携带token信息】

<el-upload class="avatar-uploader" 
  <!-- 图片上传地址 -->
  action="http://127.0.0.1:5000/upload"  
  :show-file-list="true"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload" 
  :headers="headers">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

1. 绑定响应式数据

data(){
  return{
    imageUrl: '', // 上传图片的数据
  }
}

2. css样式

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

3. 添加header头信息

headers: {
  Authorization: 'Bearer ' + localStorage.getItem('token')
},

4. 图片上传处理方法

//图片上传的功能
handleAvatarSuccess(res, file) {
  console.log('success', file);
  // 图片显示到+窗口中
  this.imageUrl = URL.createObjectURL(file.raw);
},
// 格式判断
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  // 文件大小，小于2M
  const isLt2M = file.size / 1024 / 1024 < 2;

  // 限制格式，只能上传后缀名是jpeg
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!');
  }
  // 文件的大小
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}

配合表单实现图片上传

图片上传

1. 将图片上传到服务器

2. 将图片返回的路径地址，添加到数据库

1. 表单中使用图片上传

<el-form-item label="图片上传" prop="bookurl">
  <!-- 
  不是使用axios上传的图片，使用的是form表单的方式
  添加authorization头部信息
  -->
  <el-upload class="avatar-uploader" 
    action="http://127.0.0.1:5000/upload"  :show-file-list="true"
    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

2. 给ruleForm添加bookurl

data(){
  return{
    ruleForm: {
        bookname: '',
        price: '',
        bdesc: '',
        num: '',
        bookurl:'' // 提交到后端服务器
    },
    imageUrl: '', // 上传图片的数据
  }
}

3. 将图片地址添加到ruleForm中

//图片上传的功能
handleAvatarSuccess(res, file) {
  console.log('success', file);
  // 1. 图片显示到+窗口中
  this.imageUrl = URL.createObjectURL(file.raw);
  // 注意：保存的必须是图片真正存储的目录和地址【nodejs的地址】
  // 2. 把图片上传到服务器
  this.ruleForm.bookurl = file.response.url;
},

nodejs处理

1. 配置nodejs环境

1.1安装express

npm i express

1.2创建基本的web服务

//1.导入express模块
const express = require('express');
//2.创建web服务器
const app = express();
//3.调用app.listen()函数启动服务器
app.listen(5000, () => {
    console.log('服务器已启动！');
})

使用multer实现图片上传

• 1.安装

npm i multer  // nodejs用于上传文件的模块 
npm i uuid //uuid用来生成唯一标识符

• 在项目根目录创建static文件夹，并创建uploadImg子文件夹

• 配置 utils/upload.js

const multer = require("multer")  // nodejs用于上传文件的模块
const uuid = require("uuid")  //uuid用来生成唯一标识符

/*
  multer是node的中间件, 处理表单数据 主要用于上传文件  multipart/form-data
*/

// 指定存储位置
const storage = multer.diskStorage({
  // 存储位置
  destination(req, file, callback) {
    // 参数一 错误信息   参数二  上传路径（此处指定upload文件夹）
    callback(null, "static/uploadImg")
  },
  // 确定文件名
  filename(req, file, cb) {
    //文件扩展名
    let extName = file.originalname.slice(file.originalname.lastIndexOf('.'))
    //新文件名
    let fileName = uuid.v1()
    cb(null, fileName + extName)
  }
})
// 得到multer对象  传入storage对象
const upload = multer({ storage })
module.exports = upload;

• 在路由中使用

//图片上传
app.post("/upload", upload.single("file"), (req, res) => {
  // 需要返回图片的访问地址    域名+文件名
  const url = "http://localhost:5000/uploadImg/" + req.file.filename
  // console.log(req.file.filename);
  res.json({ url })
})

效果