element-ui 中的組件 el-upload默認的行為是一張圖片請求一次，在項目需求中，通常要求多張圖片只向后臺發(fā)送一次請求，下面的做法就可以解決這樣的需求

前端

<template>
	<el-upload
		ref="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>
	<button
		type="button"
		class="btn btn-primary btn-sm submit-btn"
		@click="submitUpload"
	>發(fā)布</button>
</template>
<script>
export default {
	data() {
	    return {
	      formData: {},
	    }
	}
	methods: {
		// 綁定在http-request,覆蓋上傳事件
		uploadFile(file) {
	        this.formData.append("blogimg", file.file);
	    },
	    // 點擊按鈕觸發(fā)
	    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("發(fā)布失??！");
	      	}
	      	this.getUserBlogs();
	      	this.blogData.content = "";
	      	this.$refs.upload.clearFiles();
	      	this.$message.success("發(fā)布成功！");
	    },
	}
};
</script>

后端

后端使用的是multer中間件，用來接收前端發(fā)送過來的multipart/form-data形式的數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-525768.html

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")中的參數(shù)名稱要和表單中的鍵值一樣(blogimg) 
// this.formData.append("blogimg", file.file);

到了這里，關(guān)于解決element-ui中組件【el-upload】一次性上傳多張圖片的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！