node+vue实现图片的上传和预览（multer中间件）

实现功能：

上传成功后存放在项目目录的tmp文件夹中，并根据该文件名进行相应修改保存进数据库中。

中间件multer的引入

主要使用到multer中间件，可以将表单上传的文件存放在req.file中。

引入：在app.js中

（静态资源路径一定注意别配错！！）

const server = express();
server.use(express.static('./')); //用户的静态资源
// 引入multer中间件，用于处理上传的文件数据
const multer = require('multer')
// 通过配置multer的dest属性， 将文件储存在项目下的tmp文件中
server.use(multer({ dest: './tmp/' }).any())

vue文件表单方法

然后在表单中我们定义一些方法：

<el-upload
              class="avatar-uploader"
              action="#"
              :auto-upload="isAutoUpload"
              :on-change="onChange"
              :before-upload="beforePicUpload">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>



beforePicUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isOKType =
        fileType === ".jpg" ||
        fileType === ".png" ||
        fileType === ".jpeg" ||
        fileType === ".bmp" ||
        fileType === ".gif";
      if (!isOKType) {
        this.$message.error("图片格式只能为jpeg/png/jpg/bmp/gif");
      }

      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 2MB!");
      }
      return isLt2M && isOKType;
    },
    onChange(file) {
      // this.activeArr[2].value = URL.createObjectURL(file.raw);
      this.form.image = file.raw;
      console.log(this.form.image, "image");
    },

onChange这一步，我们获取到了file属性的数据如下，然后我把file文件存入this.form.image中。

操作框上传方法：

    async affirm() {
      const formData = new FormData();
      
      formData.append("dormid", this.form.dormid);
      formData.append("status", this.form.status);
      formData.append("file", this.form.image);
      const headers = {
        "Content-Type": "multipart/form-data"
      };
      this.$refs["form"].validate(async valid => {
        if (!valid) return;
        try {
          this.addLoading = true;
          !this.form.id && (await addDormitory(formData, headers));
          this.form.id && (await changeDormitory(this.form));
          this.addLoading = false;
          this.$message.success(this.form.id ? "修改成功" : "添加成功！");
          this.getDormitory();
          this.dialogVisible = false;
        } catch (e) {
          this.addLoading = false;
        }
      });
    }

接收图片并修改路径

这里是比较重要的，在接口中处理传过来的image，将路径进行修改：

router.post('/addDormitory', async function (req, res) {
  // 上传的文件在req.files中
  try {
    console.log('接收到图片上传数据:', req.body, req.files);
    let file = req.files[0];
    let allUrl = [];
    // 修改图片文件名
    let now = Date.now();
    let filename = file.originalname;
    if (file.originalname.includes('.')) {
      let nameArr = file.originalname.split('.');
      filename = `${nameArr[0]}_${now}.${nameArr[1]}`;
    }
    filename = file.destination + filename;
    console.log('默认名1：', file.path);
    console.log('改名：', filename);
    fs.renameSync(file.path, filename);
    console.log('改名成功');
    let url = getRealUrl(filename);
    allUrl.push({
      id: file.fieldname,
      url,
    });
    console.log('改名成功url',url);
    let sql = "INSERT INTO dormitoryInfo(dormid, status, image) VALUES (?, ?, ?)";
    let values = [req.body.dormid, req.body.status, url];

    pool.query(sql, values, (err, result) => {
      if (err) {
        return res.send(utils.returnData({ code: -1, err, req }));
      }
      res.send(utils.returnData({ data: result }));
    });
  } catch(error){
    console.error('error:', error);
    res.send(utils.returnData({ code: -1, error }));
  }
});

实现结果

存入数据库的路径为：