我的意思是不保存在服务器上，用户在前端点击上传文件，就将文件下载到前端文件夹内（因为前后端分离且前后端在两台电脑），然后前端显示文件夹图片渲染在页面上，只需要传一个图片名给后端就可以了

好的，我明白了。您的问题是如何在前端上传文件，并将其渲染为图片并显示在页面上，然后将图片名发送给后端。首先，您可以使用HTML中的`<input type="file">`标签来实现文件上传。然后，通过JavaScript中的`FileReader`对象将上传的文件读取为DataURL，再将其赋值给`<img>`标签的`src`属性，即可将文件渲染为图片并显示在页面上。最后，您可以将图片名发送给后端。整个过程可以使用Ajax来实现异步上传和发送请求。

相关问题

前后端分离系统前端配置文件怎么改

前后端分离系统的前端配置文件通常是指用于管理应用资源、API地址以及开发环境设置等的配置文件，如Webpack的配置文件（webpack.config.js）、Vue CLI的vue.config.js，或者是React项目的config-overrides.js等。

要修改前端配置文件，一般步骤如下：

1. **定位配置文件**: 找到项目根目录下的`package.json`或对应的配置文件夹，比如`config`或`build`文件夹内的配置文件。

2. **打开编辑器**: 使用文本编辑器（如VS Code、Sublime Text或Atom）打开该文件。

3. **查找需要修改的部分**：
- 如果是路由配置，可能会在`routes`、`paths` 或 `routes.js` 等文件中找到。
- 对于API基础URL，检查`axios.defaults.baseURL`或`fetch`的相关配置。
- 配置打包路径、入口文件、输出文件名等可在`entry`, `output`, 或`externals`部分查看。

4. **更改配置值**：根据实际需求更新相应的属性，例如将生产环境的API地址替换为部署后的地址，调整打包的优化选项等。

5. **保存并测试**：保存文件，然后在开发环境中重启服务器（如果有的话），通过浏览器检查新配置是否生效。

vue前后端不分离用axios怎么实现上传图片到指定文件夹

如果你的前后端不分离，那么你可以使用 `form` 表单来实现上传图片。具体步骤如下：

1.在你的前端页面中添加一个 `form` 表单，其中 `enctype` 属性需要设置为 `multipart/form-data`，并且添加一个 `input` 标签，`type` 属性设置为 `file`，`name` 属性设置为你想要的参数名，例如 `file`：

<form enctype="multipart/form-data" method="post" action="/upload">
  <input type="file" name="file" />
  <button type="submit">上传图片</button>
</form>

2.在你的后端代码中，使用类似于以下的代码来处理上传的文件：

const fs = require('fs')
const path = require('path')
const express = require('express')
const app = express()

app.post('/upload', (req, res) => {
  const file = req.files.file
  const filePath = path.join(__dirname, 'uploads', file.name)

  // 将文件保存到指定的文件夹中
  file.mv(filePath, (err) => {
    if (err) {
      return res.status(500).send(err)
    }

    res.send('文件上传成功！')
  })
})

app.listen(3000, () => {
  console.log('服务器已启动...')
})

在上面的代码中，我们首先获取上传的文件对象 `req.files.file`，然后使用 `mv` 方法将文件保存到指定的文件夹中。

注意：上述代码仅供参考，需要根据你的实际情况进行修改。