解决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);

巴特西

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

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

前端

后端

最新文章

热门文章