解决element-ui中组件【el-upload】一次性上传多张图片的问题

element-ui 中的组件 el-upload默认的行为是一张图片请求一次，在项目需求中，通常要求多张图片只向后台发送一次请求，下面的做法就可以解决这样的需求

前端

<template><el-uploadref="upload":action="actionUrl":auto-upload="false"list-type="picture-card":http-request="uploadFile":on-preview="handlePictureCardPreview"accept="image/png, image/jpeg"multiple:limit="9"><i class="el-icon-plus"></i></el-upload><buttontype="button"class="btn btn-primary btn-sm submit-btn"@click="submitUpload">发布</button>
</template>
<script>
export default {data() {return {formData: {},}}methods: {// 绑定在http-request,覆盖上传事件uploadFile(file) {this.formData.append("blogimg", file.file);},// 点击按钮触发async submitUpload() {this.formData = new FormData();this.formData.append("content", this.blogData.content);this.formData.append("token", this.token);this.$refs.upload.submit();const { data: res } = await this.$http.post(this.actionUrl,this.formData,{headers: { "Content-Type": "multipart/form-data" }});if (res.meta.status !== 200) {return this.$message.error("发布失败！");}this.getUserBlogs();this.blogData.content = "";this.$refs.upload.clearFiles();this.$message.success("发布成功！");},}
};
</script>

后端

后端使用的是multer中间件，用来接收前端发送过来的multipart/form-data形式的数据

multer.js

const multer = require("multer");
const path = require("path");
let dst = "../uploads";
let storageBlogimg = multer.diskStorage({destination: function(req, file, cb) {cb(null, path.join(__dirname, dst));},filename: function(req, file, cb) {let ext = file.originalname.substr(file.originalname.lastIndexOf("."));let filename = file.fieldname + "-" + Date.now() + ext;cb(null, filename);},
});
exports.storeBlogimg = multer({ storage: storageBlogimg });

router.js

const store = require("../middleware/multer");
router.post("/api/createBlog",store.storeBlogimg.array("blogimg"),//blog_controller.createBlog
);
// array("blogimg")中的参数名称要和表单中的键值一样(blogimg)
// this.formData.append("blogimg", file.file);

解决element-ui中组件【el-upload】一次性上传多张图片的问题相关推荐

element UI el-upload组件实现视频文件上传视频回显
项目中需要提供一个视频介绍,使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL, 百度找了一番后最终实现了. HTML <el ...
一次性上传300张图片引发的思考
1. 需求来源和变动 1.1 需求的来源最近负责的项目是一个题库系统,客户通过excel来批量录入试题,且题里面会有图片和视频.所以采用的方案是 ① excel中使用某种规则表达式来表示图片 ② ...
Element UI结合vue-cropper打造图片裁剪上传组件
效果显示引用vue-cropper npm install vue-cropperyarn add vue-cropper 创建组件文件夹上传按钮组件 index.vue <template ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
php一次性上传多张图片
首先是我们的input框,和我们的html页面为. 这里我们是增加的input框我们也可以写写一个属性 multiple="multiple" 这样就可以ctrl多选图片 ...
element UI el-upload多张图隐藏上传空间
先包裹displayNone一个class名然后通过css隐藏 <div class="displayNone"><el-uploadaction=" ...
Element UI 和js实现文件的上传和下载
文件上传 before-upload参数是在文件上传之前对文件进行一些验证 action参数是文件上传的服务器地址 this.uploadHref = this.baseUrl + '/tourism ...
微信开发上传多张图片html,微信JSSDK一次性上传多张图片卡死解决方案
应用场景描述微信禁止了使用表单INPUT[TYPE="FILE"]上传图片,必须使用微信WEB JSSDK 图片上传,该插件是一张一张的上传的.过程是这样的上传图片 --> ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...

解决element-ui中组件【el-upload】一次性上传多张图片的问题

element-ui 中的组件 el-upload默认的行为是一张图片请求一次，在项目需求中，通常要求多张图片只向后台发送一次请求，下面的做法就可以解决这样的需求

前端

后端

multer.js

router.js

解决element-ui中组件【el-upload】一次性上传多张图片的问题相关推荐

最新文章

热门文章