如何在Vue.js项目中存储上传文件 无需发送至Django后端服务器

核心限制说明 #

运行在浏览器中的JavaScript受安全沙箱限制，没有权限直接写入前端项目的本地文件目录，你想要的直接调用fileData.save()把文件存到前端项目/assets/images/路径的逻辑是无法直接实现的，浏览器禁止前端脚本随意操作宿主设备的文件系统，避免恶意文件篡改风险。

可行实现方案 #

根据你的使用场景选择对应方案：

方案1：仅当前用户本地临时使用（仅预览、会话级生效）

如果不需要其他用户访问该上传文件，只需要当前用户当前浏览器使用，可以直接生成临时访问URL，修改你的filesChange方法即可：

filesChange(event) {
  const fileData = event.target.files[0];
  if (!fileData) return;
  // 生成blob临时URL，可直接赋值给img的src属性展示
  this.system_client_logo_url = URL.createObjectURL(fileData);
  
  // 如果需要当前用户刷新页面后仍能访问，小文件可以转base64存到浏览器LocalStorage
  const reader = new FileReader();
  reader.onload = (e) => {
    localStorage.setItem('saved_client_logo', e.target.result);
  };
  reader.readAsDataURL(fileData);
}

该方案的临时URL仅当前页面会话生效，LocalStorage存储的内容仅当前用户当前浏览器可见，其他用户无法访问。

方案2：需要所有用户都可访问该上传文件

你当前使用的「文件存前端项目、数据库仅存URL」的模式，在前端项目打包部署后是静态文件服务，运行时无法动态写入新文件到静态目录，需要调整存储逻辑：

• 你可以搭建独立的静态文件存储服务（如私有MinIO服务、公有云对象存储），前端直接把文件上传到该存储服务，拿到公开访问URL后，把URL存入Postgres数据库即可，整个流程不需要经过Django后端，符合你前后端独立的要求。
• 如果坚持要把文件最终放在前端项目目录，仅适合低频运营上传场景：前端把上传的文件转成文件流发送给专属的部署服务，由部署服务把文件写入前端项目目录后重新打包部署前端，普通用户高频上传场景不推荐该方案。

内容的提问来源于stack exchange，提问作者Vahida Vadiya