账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    el-input获取上传图片后转为FormData传给后端koa-multer 接收不到?
    90
    0
    问题描述使用element组件el-upload自定义上传图片,获得图片信息后用FormData转化类型然后通过axios传给后端,后台自己用koa搭的,用koa-multer来接受form-data型数据。用postman发送图片可以在后台显示,不知道为什么在前端发的数据有什么问题后台接收不到相关代码后端部分代码const Multer = require('koa-multer');const pictureUpload = new Multer({ dest: PICTURE_PATH})const pictureHandler = pictureUpload.array('picture', 9)const pictureResize = async (ctx, next) => { //获取所有的图像信息 const files = ctx.req.files console.log(files);//这里接收不到 }axios请求import axios from './axios' export function uploadFiles(param,id){ return axios({ url:'upload/picture?momentId=34', method:'post', data:{ param }, headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() //发现发请求的时后台收不到boundary自己建了一个 } })};el-upload组件(部分) <el-upload :on-change="onUploadChange" > <i class="el-icon-plus"></i> </el-upload>data以及js(部分)export default { data() { return { param: {}, }; }, methods: { onUploadChange(file, fileList) { this.param = new FormData(); this.param.append(`picture`, file.raw, file.name); }, test() {//通过按钮点击提交事件 uploadFiles(this.param) //调用axios 发现传入的formdata为空 .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); },}你期待的结果是什么?实际看到的错误信息又是什么?postman中上传可以显示前端提交的时候是这样的 看不到消息 就有点不理解formdata里的KV的picture的表示方式。后台打印不到
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • {鸢゜} 普通会员 1楼

      你可以使用el-input的File组件来获取上传的图片,然后将其保存到FormData对象中。以下是一个示例:

      ```javascript <el-input type="file" v-model="fileInput" @change="handleChange"

      ```

      javascript export default { methods: { handleChange(e) { const file = e.target.files[0]; if (file) { const formData = new FormData(); formData.append('file', file); this.$emit('upload', formData); } } } }

      在后端,你可以使用multer库来处理上传的FormData。以下是一个示例:

      ```javascript const multer = require('multer'); const app = require('./app');

      const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, file.originalname) } })

      const upload = multer({ storage: storage });

      app.post('/upload', upload.single('file'), (req, res) => { res.send('File uploaded successfully!'); }); ```

      在这个示例中,multer将把文件保存到"uploads/"目录下,并且每次上传一个文件时,它会生成一个唯一的文件名。你可以根据需要修改文件存储的位置和文件名的生成规则。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部