Vue-cli 项目关于用户上传头像功能,头像文件应该存放在哪才能被访问到

这几天一直被这个问题困扰。
之前在网上查了很多很多资料好像都没有我想要的,也许是我某个知识点没有弄懂。

问题描述:

我想实现的功能是用户在个人中心实现自己更换头像。
我现在实现了通过Multer将文件上传成功,但是上传之后的文件页面显示不了,一直显示404
GET https://www.×××××.cn/static/image/file-1562048630615.jpg 404 (Not Found)

文件处理:

通过Multer上传文件,将文件存储到src同级目录的static文件下的image文件里。

核心代码:
var storage = multer.diskStorage({
    //设置上传后文件路径,uploads文件夹会自动创建。
       destination: function (req, file, cb) {
           cb(null, '../../view/static/image')
      }, 
    //给上传文件重命名,获取添加后缀名
     filename: function (req, file, cb) {
         var fileFormat = (file.originalname).split(".");
         cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1].toLowerCase());
     }
}); 

执行完之后在这个目录确实是能看到被上传的文件,说明上传文件这里是没问题的,问就就出在了引用文件的地方。

代码:
<div class="photo_show" :style="{background:'url('../../static/image/file-1562048630615.jpg')'}"></div>

然后我就在想是不是放错了位置。但是我之前的文件都是放在这都可以使用,后面发现我之前的文件能访问是因为都打包了,用户上传的新图片是没有被打包的,是在未打包的前端代码目录里面

这里说一下我项目结构

  • view
    • build
    • config
    • dist
    • node_modules
    • src
      • assets
      • components
      • pages
      • router
      • App.vue
      • main.js
    • static
      • image
      • utils
    • ......后面就是一些配置文件

打包之后就是一个static文件夹和index.html,然后将它们放到nginx的html文件的dist文件里面。在没有做文件上传功能的时候一些背景图也出现过404但是网上有很多解决办法我也顺利的解决了这个问题,但是如今这个上传文件显示不了的问题真的折腾了很久不知道如何下手了,之前问过我朋友说是放在服务端代码的public目录里面然后使用绝对路径访问结果发现还是404。
这个新增的文件肯定是不需要被打包的也没办法被打包。但是如果不打包有访问不到所以真的不知道该怎么办,还是说我有些地方没弄懂希望有知道的人帮我指点一二。谢谢!

讨论数量: 1
pardon110

你需要搞清楚你访问的域名所指向的服务器的实际物理路径文件夹,即访问的入口。另外还要考虑是否使用了软链接,所有的资源若域名与访问域名一致(没有代理),通常都是基于该访问入口的路径

3周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

社区文档:

API 查阅、风格指南、示例、Cookbook 等
部署你的 Vue.js 或者前端开发者环境