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

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

前端

<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"
>发布</button>

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("发布成功！");
    },
}

后端

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