vue文件上传通过路由报错the request was rejected because no multipart boundary was found

这个错误通常是因为在上传文件时没有正确设置请求头部的 Content-Type，导致服务器无法识别上传的数据类型。在使用路由上传文件时，可以在请求头部设置 Content-Type 为 multipart/form-data，并设置 boundary 参数，boundary 参数可以随意设置，但需要保证在请求体中没有出现过。

示例代码：

let formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data; boundary=' + new Date().getTime()
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

在以上代码中，我们使用了 axios 库来发送 POST 请求，请求体中使用 FormData 对象来封装要上传的文件。在请求头部设置了 Content-Type 为 multipart/form-data，并设置了 boundary 参数，boundary 参数通过获取当前时间戳来保证唯一性。

相关问题

使用el-upload报request was rejected because no multipart boundary was found

当使用el-upload组件时，出现"request was rejected because no multipart boundary was found"错误是因为请求中没有找到多部分边界。这个错误通常发生在没有正确设置请求的Content-Type头部时。

为了解决这个问题，你需要进行以下设置：
- 在`httpRequest()`方法中，设置`contentType`为`false`，这样可以避免Spring Boot报错。服务器会找不到分割表单内容的参数。
- 同样，在`httpRequest()`方法中，将`processData`设置为`false`，避免jQuery将数据转换为字符串。
- 另外，你可以尝试加上`cache: false`，这个应该不重要，因为POST请求不会走缓存。
- 最后，你可以将`async`设置为`false`或`true`，这个应该不重要，因为同步和异步都能工作。

通过以上设置，你应该能够解决"request was rejected because no multipart boundary was found"错误。如果服务器返回200状态码，你将会看到成功的消息，否则会显示错误消息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue+elementui+axios+servlet文件上传问题](https://blog.csdn.net/qq_43761240/article/details/124463136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Spring Boot+Element 文件随表单上传文件 同步上传](https://blog.csdn.net/qq_37975021/article/details/106867838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue 路由文件 无法识别@ 报错this dependency was not found:

当在 Vue 路由文件中引用组件时，可以使用相对路径或别名（alias）来引用，其中别名可以在 webpack 的配置中进行设置。通常情况下，@ 符号代表 src 目录的路径，也是一个别名。如果在路由文件中使用 @ 来引用组件时出现了“this dependency was not found”这样的错误提示，可能是以下原因所致：

1. webpack 配置中没有正确设置别名
可以在 webpack 的配置文件中设置一个 alias，把 @ 映射到项目的 src 目录。如下面的例子，将 @ 映射到 src 目录：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

2. TypeScript 中的路径映射问题
如果在 TypeScript 中使用了路径映射来解析路径，如下所示：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

则需要在 webpack 配置中设置 resolve.modules，将项目根目录加入其中：

// webpack.config.js
module.exports = {
  resolve: {
    modules: [
      path.join(__dirname, './'),
      path.join(__dirname, './node_modules')
    ]
  }
}

3. 项目结构变更或路径错误
如果项目结构发生了变更，或者组件的路径写错了，也会出现 “this dependency was not found”这样的错误提示。在这种情况下，需要检查组件的路径是否正确，或者对项目结构进行调整。

总之，无法识别 @ 符号的错误往往是因为 webpack 配置问题或路径设置不正确，需要仔细检查并进行调整。