vue Express上传多个文件到亚马逊s3

2024-02-12

我需要有关如何在亚马逊 S3 上上传多个文件图像的帮助。我假设我有三个这样的输入

<template lang="html">
 <form enctype="multipart/form-data" @submit.prevent="sendFile">
  <input type="file" ref="file1" @change="selectFile1">
  <input type="file" ref="file2" @change="selectFile2">
  <input type="file" ref="file3" @change="selectFile3">
  <div class="field">
   <button class="button is-info">Send</button>
  </div>
 </form>
</template>

我的前端 vue 脚本看起来像这样

<script>
 import _ from 'lodash'

 export default {
  name: 'BulkUpload',



data() {
    return {
      file: "",
      message: "",
      error: false,
      sendFiles: []
    }
  },

  methods: {
    selectFile1() {
      this.file = this.$refs.file1.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    selectFile2() {
      this.file = this.$refs.file2.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    selectFile3() {
      this.file = this.$refs.file3.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    sendFile() {

      let formData = new FormData()
      _.forEach(this.uploadFiles, file => {
        formData.append('file', file)
      })

      var self = this
      axios.post('http://localhost:3000/image/bulkupload', formData)
      .then(function(response) {
        console.log(response);
        self.message = "File has been uploaded"
        self.file = ""
        self.error = false
      })
      .catch(function(err) {
        self.message = "Something went wrong"
        self.error = true
        console.log(err);
      })
    }
  }
}
</script>

使用 formData 将其发送到快递服务器后,我的图像路由将使用此代码处理它

const sendingImage = require('../helper/sendingImage');

    router.post('/bulkupload', sendingImage.upload.array("file"), (req, res) => {
  var promises=[];
  for(var i = 0; i < req.files.length; i++) {
    var file = req.files[i];
    promises.push(sendingImage.uploadLoadToS3(file));
  }
  Promise.all(promises).then(function(data){
    res.send('Uploadedd');
    console.log('success');
  }).catch(function(err) {
    console.log('failed');
    res.send(err.stack);
  })
})

我的助手看起来像这样

const multer = require('multer');
const aws = require('aws-sdk');

aws.config.update({
  accessKeyId: <my access id>,
  secretAccessKey: <my secret key>
})

const upload = multer({
  dest: './uploads/'
})

function uploadLoadToS3(ObjFile){
  var params = {
    ACL :'public-read',
    Body : new Buffer(ObjFile.buffer),
    Bucket:'vue-express-upload',
    ContentType:ObjFile.mimetype,
    Key:ObjFile.originalname
  }
  return s3.upload(params).promise();
}

module.exports = {
  upload,
  uploadLoadToS3
}

老实说,我的代码运行没有任何问题。它发送响应状态 200,没有任何错误。 但问题是,当我检查我的 S3 存储桶时,它没有任何上传的文件。它仍然是空的。 我的代码有什么问题吗?


我找到的使用 aws-sdk 的解决方案。好处是我也将使用这个解决方案和我的项目。

学分:StackOver - 答案 https://stackoverflow.com/questions/40494050/uploading-image-to-amazon-s3-using-multer-s3-nodejs参考:穆特-s3 https://github.com/badunk/multer-s3

在您的帮助文件中,您将像这样保留它:

const aws = require('aws-sdk')
const multer = require('multer')
const multerS3 = require('multer-s3')

aws.config = new aws.Config({
    accessKeyId: <my access id>,
    secretAccessKey: <my secret key>,
    region: <my region>
})
const s3 = new aws.S3()
const upload = multer({
    storage: multerS3({
    s3: s3,
    acl: 'public-read',
    bucket: 'vue-express-upload',
    contentType: function(req, file,cb){
        cb(null, file.mimetype)
    },
    key: function (req, file, cb) {
        cb(null, file.originalname)
    }
    })
})

module.exports = upload

您还可以将文件的密钥更改为更独特的内容,例如日期/分钟/秒。这由您自行决定,我使用文件名作为密钥。

在你的路由器中,路由将如下所示:

const upload = require('../helper/sendingImage')

router.post('/bulkupload', upload.array('files'), (req, res) => {
    console.log('success')
    //console.log(req.files)
    res.send('Uploadedd')
    //res.send(req.files)    
})

查看上传数据:

router.post('/bulkupload', upload.array('files'), (req, res) => {
    res.send({
        status: 200,
        data: {
            sucess: true,
            file: req.files
        }
    })   
})

如果没有中间件文件,它就不会发送。不会返回错误。唯一可能返回的错误是 AWS 访问信息的错误。

注意:我使用了邮递员。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue Express上传多个文件到亚马逊s3 的相关文章

  • 在node.js 0.12.x中使用libuv函数

    我写了一个node js c 插件 在node js 0 10 x下可以成功编译 但是当迁移到0 12 x时 出现了一些错误 例如error C2065 uv work t undeclared identifier 我想知道我是否可以在0
  • 多次训练brain.js?

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN
  • 重命名猫鼬中的字段[重复]

    这个问题在这里已经有答案了 我有两个 JSON 对象 每个对象都有一个名字字段 我想将名字重命名为名称 还想使用猫鼬将现有的名字值导入到名称 Schema const mongoose require mongoose const Sche
  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport
  • 将基本的 Node.js 应用程序部署到 openshift 在 git Push 上出现错误

    我使用 openshift 网站上的过程设置了一个默认节点应用程序 在我的 ubuntu 盒子上做了一个 git 克隆 编辑了readme md 做了一次提交 并尝试推送到仓库 出现很多 npm fetch failed 错误 以及很多 E
  • 如何让 Angular 监视多个库的更改并在需要时重新编译

    这个问题与让 Angular 应用程序监视库更改并进行自我更新 https stackoverflow com questions 60473727 make angular app watch for libraries changes
  • 如何清除node.js中的超时

    您好 我们正在使用 node js socket io 和 redis 开发应用程序 我们有这个程序 exports processRequest function request result var self this var time
  • 如何从vuejs和firestore获取文档的id?

    我有这个代码可以从 firestore 获取所有文档 const getThemesList async commit gt const snapshot await firebase firestore collection themes
  • antlr4-tool 在 Win10 中失败,并显示:错误:命令失败:哪个 java

    在Win10中运行 为了尝试在Node JS中创建解析器 我安装了ANTLR4工具 npm install save dev antlr4 tool Ran c prj parser node modules bin antlr4 tool
  • 将 XML 传递给节点中的存储过程

    我试图弄清楚如何使用以下方法将 XML 值传递给存储过程MSSQL https www npmjs com package mssql节点驱动程序 从文档中我可以看到该驱动程序确实支持存储过程 并且您还可以定义自定义数据类型 如下所示 sq
  • 返回承诺与在承诺内返回未定义之间的区别

    我不太确定我是否理解这两种常见场景之间的区别 假设我们有这个 user save then function val anotherPromise1 val then function val anotherPromise2 val cat
  • 节点js(获取连接)

    var nodePort 3030 var express require express var app express var bodyParser require body parser var db require mysql va
  • 如何添加从 Outlook 到 Web 表单的拖放上传功能?

    我正在寻找一种方法 允许用户以简单的方式将 Outlook 电子邮件上传到基于 Web 的系统 我可以让它以手动方式为用户工作 他们可以将电子邮件从 Outlook 拖放到桌面上 这会创建一个 msg 文件 这非常有效 尤其是 电子邮件中是
  • vue如何设置嵌套对象的默认道具

    我的道具是这样的 house kitchen sink 我尝试过类似的事情 但没有成功 props house type Object default gt kitchen sink 如何为此类对象设置默认道具 来自文档 对象或数组默认值必
  • 使用 Cheerio 选择具有属性的元素

    选择具有特定属性的所有 dom 元素的最有效方法是什么
  • 当前环境不支持指定的持久类型firebase

    我收到这个错误 当前环境不支持指定的持久性类型 我正在测试我的应用程序 发现当用户登录时 它在任何地方都已登录 所以我尝试使用 firebase 在 Node js Express 上实现会话 希望这能解决这个问题 我的代码是这样的 rou
  • Express 4.x 在 2 分钟后关闭连接

    我有一个简单的节点应用程序来处理GET foo 此请求需要一些时间来计算并返回文件 每次请求持续超过2分钟 连接就会关闭 我正在使用 Express 4 10 2 和节点 0 10 32 我读到 http 模块的默认超时为 2 分钟 htt
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n

随机推荐

  • CORS 不适用于 Chrome

    我已经在服务器上设置了跨源资源共享 使用 CrossOriginFilter 的 Jetty 它在 IE8 和 Firefox 上完美运行 在 Chrome 上 它只是 没有 ajax url crossOriginURL type GET
  • Pandas 计算机每小时平均值并设置在间隔中间

    我想计算风速和风向时间序列的每小时平均值 但我想将时间设置为半小时 因此 14 00 到 15 00 之间的值的平均值将为 14 30 现在 我似乎只能在间隔的左侧或右侧得到它 这是我目前拥有的 ts g item replace seco
  • 无法下载eclipse插件

    我正在尝试下载 eclipse 的 kotlin 插件 我能够连接到 eclipse 市场 但是当我尝试下载它时 出现错误 Unable to read repository at https dl bintray com jetbrain
  • 对 Pandas 数据框中的行对应用函数

    我是 pandas dataframe 的新手 我想应用一个在同一列中获取几行的函数 就像当您应用函数 diff 时一样 但我想计算文本之间的距离 所以我定义了一个测量距离的函数 我尝试使用 apply 但我不知道如何选择几行 下面我展示了
  • 石墨总结数据点

    我在用着graphite http graphite wikidot com 收集数据 我想检索一段时间内某些事件的总数 比如说 每周的登录次数 但是 我只需要总数 不需要查看它如何随时间变化 当我使用类似的东西时from 1w targe
  • Symfony 5 Api 测试 createClient() LogicalException

    正如标题所示 我正在使用 Symfony 5 构建一个 API 我有一些控制器需要不同的用户权限 我想测试它们 所以我决定创建两个具有不同角色的用户用于测试目的 ROLE USER and ROLE ADMIN 当前的代码是这样的 注意 这
  • MySql:显示列但排除除字段名称之外的所有内容

    我想将表的字段名称从 MySql 提取到 python 中 我知道 show columns from project 将工作 我读到您可以添加 WHERE 以将其限制为某些字段 但我找不到如何仅返回列名而不返回类型 键 空 额外信息的示例
  • Rails.cache.clear 和 rake tmp:cache:clear 有什么区别?

    这两个命令等效吗 如果不是 有什么区别 rake 任务仅清除存储在文件系统中的文件 Rails root tmp cache 这是该任务的代码 namespace cache do desc Clears all files and dir
  • 需要了解SemaphoreSlim的用法

    这是我的代码 但我不明白是什么SemaphoreSlim是在做 async Task WorkerMainAsync SemaphoreSlim ss new SemaphoreSlim 10 List
  • ASP.NET / IIS 远程调试 - DEBUG 动词

    我正在寻找有关 DEBUG HTTP 动词的详细信息 我很清楚这是用于远程调试 尽管我什至不确定它是用于 IIS 还是 ASP NET 如果我想直接访问此界面 即不通过 Visual Studio 而是手动发送这些命令 我需要知道什么 它的
  • 我需要为初级程序员进行一些简单的逻辑/编程练习[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我目前正在教授员工 ECMA 脚本 因为维护我们使用的工作流程系统需要它 并且我需要一些挑战来用作练习 我们已经涵盖了大部分语言 他现在非
  • 为遗留库创建代码契约

    最终目标是为驻留在我无法控制的外部程序集中的类指定契约 即我不能直接向该类添加契约 到目前为止我已经尝试过 ContractClassFor属性 不起作用 因为目标类必须指向合约类 通过对自动生成的程序集进行逆向工程 手动构建合同引用程序集
  • Bingpreview 使电子邮件中的一次性链接失效

    Outlook com 似乎使用必应预览 https www bing com webmaster help which crawlers does bing use 8c184ec0爬虫来爬行电子邮件中的链接 但在打开电子邮件后 用户有机
  • GCC 选项强制执行 Ansi C 标准检查?

    我应该使用哪些 gcc 选项来强制执行 ANSI C C99 警告 错误 gcc GCC 3 4 2 mingw 特殊 我在用着 gcc 学究式 ansi std c99 它是否正确 The ansi标志是同义词 std c89 flag
  • CakePHP 2.1.0:如何创建“停机维护”页面

    我正在尝试实现类似的东西马克 斯托里的 停机维护 页面 http mark story com posts view quick and dirty down for maintenance page with cakephp使用 Cake
  • 代码中未初始化的指针

    我正在学习 C 我发现指针如果未初始化可能会指向内存中的随机位置 并产生内存可能被其他程序使用的问题 现在 如果是这种情况 我们就不应该在代码的任何部分包含这一行 int ptr 相反 我们应该有类似的东西 int ptr NULL Is
  • Spring 批处理:FlatFileItemWriter 标头从未被调用

    我的 FlatFileItemWriter 回调有一个奇怪的问题 我有一个自定义 ItemWriter 实现 FlatFileFooterCallback 和 FlatFileHeaderCallback 因此 我在 FlatFileIte
  • 将 Android Google Maps v2 与自定义 View 或 ImageView 结合使用

    基本上我希望能够使用 Google 地图 v2 在地图上绘制雷达图像 并使用良好的 性能并且位图图像没有闪烁或延迟 我目前正在使用 Maps v1 来执行此操作 效果很好 但是 Maps v2 不太适合这样做 您可能认为 GroundOve
  • 反射 - 在我自己的程序集中递归迭代对象的属性 (Vb.Net/3.5)

    我想知道是否有人可以帮助我 我没有做太多反思 但了解基本原理 我正在尝试做的事情 我正在开发一个类 该类收集大量有关本地系统 网络等的信息 用于自动错误报告 我 理想情况下 希望能够将批次序列化为 XML 字符串并仅将其显示在文本框中 而不
  • vue Express上传多个文件到亚马逊s3

    我需要有关如何在亚马逊 S3 上上传多个文件图像的帮助 我假设我有三个这样的输入