话说前面,此篇是为了给我个人笔记,也给朋友们做个思路参考

前端部分用了vue+elementUI

后端部分用了nodejs,expre

ss框架,multer中间件,cors中间件消除跨域

想了半天不知道咋写 直接贴代码吧

前端部分

<template>
  <div>
    <el-upload
      ref="upload"
      action="http://119.91.217.109:8887/upload"
      list-type="picture-card"
      :auto-upload="false"
      multiple
      :file-list="fileList"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload()"
      >上传到服务器</el-button
    >
    <el-button
      type="text"
      @click="dialogVisible = true"
      v-show="resListSql != 0"
      >查看截图预览</el-button
    >

    <!-- 取消了lazy 流量会爆增 -->
    <el-dialog title="编号" :visible.sync="dialogVisible" width="70%">
      <el-image
        v-for="url in resListSql"
        :key="url"
        :src="`http://119.91.217.109:8887/${url}.jpg`"
        class="demo-image__lazy"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 自减用,用于全部减完以后提示
      fileList: [],
      // 返回数据的数据
      resList: [],
      // 处理好 响应可以上传的数据
      resListSql: [],
      sizeList: [],

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    //清除 覆盖
    cover() {
      this.resListSql = [];
    },

    // 上传前钩子,获取上传前的数据
    beforeUpload(file) {
      this.sizeList.push(file.size);
      this.cover();
    },
    //res 是上传后的返回数据
    //file 是当前图片信息
    //fileList 是图片数组对象

    handleSuccess(res, file, fileList) {
      //赋值现在的数据给data的fileList
      this.fileList = fileList;
      //把每个图片上传成功后的数据(文件名,文件大小size)放进resList存进数据库
      this.resList.unshift(res);
      //获取这次上传的图片数据在数组里的位置
      let index = this.fileList.indexOf(file);
      // 上传成功,删除该张图片的数据
      this.fileList.splice(index, 1);
      // 删到最后一个的时候提示上传成功
      if (this.fileList.length === 0) {
        //把获取到的相应数据放回待上传到数据库的变量中
        this.$message.success(`上传成功,共上传了${this.resList.length}张图片`);
        // 正确顺序的列表
        console.log(this.resListSql);
        this.sizeList.forEach((itme) => {
          for (let i = 0; i < this.resList.length; i++) {
            if (itme == this.resList[i][1]) {
              this.resListSql.push(`${this.resList[i][0]}`);
            }
          }
        });
        //清空数据
        this.resList = [];
        this.sizeList = [];
      }
    },
    handleRemove(file) {
      console.log(file);
      console.log(this.fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style>
.demo-image__lazy {
  /* overflow: scroll; */
  width: 1300px;
  height: 700px;
}
</style>

后端nodejs服务器端部分

let express = require('express');
let multer = require('multer');
let fs = require("fs");
const cors = require('cors')
const app = express()


app.use(cors());



app.get('/upload', function (req, res) {
   res.send("11")
})

app.post('/upload', multer({
   //设置文件存储路径
   dest: "upload"
}).array('file', 500), function (req, res, next) {  //这里10表示最大支持的文件上传数目
   let files = req.files;
   fileInfos = [];
   if (files.length === 0) {
      res.render("error", { message: "上传文件不能为空！" });
      return
   } else {

      for (var i in files) {
         let file = files[i];

         const name = Date.now()
         fs.renameSync('./upload/' + file.filename, './upload/' + name + '.jpg');//这里修改文件名。
         //获取文件基本信息
         fileInfos.push(name, file.size);
         console.log(fileInfos[0] + '.jpg');
      }
      // 设置响应类型及编码
      // res.set({
      //    'content-type': 'application/json; charset=utf-8'
      // });
      // console.log(fileInfos);
      res.send(fileInfos);
   }
});

app.use(express.static("upload"));

app.listen(8887, () => {
   console.log("启动成功  8887端口")
});