初入职场“坑”连连，小问题导致需求延期，自定义上传图片要素都要考虑

2023-10-31 19:47:50

进入职场，也许每天的任务都是各种修改bug。俗话说，只有了解bug，才能避免bug，才能成长，才能变强。现在来回顾实习阶段遇到的第一个坑，一个小bug，导致需求延迟了两个小时。

前因后果

在实习的前几天，我负责一个小功能：自定义上传图片。需求很简单：实现一个上传图片的按钮，将图片上传到服务器，并且可以预览上传的图片。

走进误区

我按照惯例，先写了一个简单的HTML框架，然后在页面中添加了一个文件上传的 input 标签。然后，我用elementUI的Upload组件来实现图片上传的功能。

<template>
  <el-upload
    action="http://localhost:3000/upload"
    on-success="handleSuccess"
    on-error="handleError"
  >
    <el-button type="primary">上传图片</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      console.log(response);
    },
    handleError(error) {
      console.log(error);
    },
  },
};
</script>

写完代码后，我兴致勃勃地运行了项目，却发现图片无法上传。我查看了控制台，发现有一个错误：

Error: Failed to load resource: the server responded with a status of 404 (Not Found)

我尝试了很多方法，比如修改上传的地址，修改文件上传的类型，但都无济于事。

恍然大悟

当我正准备放弃的时候，我突然想到，我还没有在服务器端写上传图片的代码。我赶紧在服务器端写了一个简单的接口，用来接收上传的图片。

app.post('/upload', (req, res) => {
  const file = req.files.file;
  file.mv(`./uploads/${file.name}`, (err) => {
    if (err) {
      res.status(500).send('上传失败');
    } else {
      res.status(200).send('上传成功');
    }
  });
});