Vue结合Element-ui上传图片(upload)时连带上传其它数据(图片和数据一块儿上传)

若是有必定文档阅读能力能够看官网文档

https://element.eleme.cn/#/zh-CN/component/upload

1. 前端代码

1.1 html代码

<el-form :model="ruleForm" ref="ruleForm" style="width:600px" >
       <el-form-item label="商品名称" prop="name" label-width="100px">
        <el-input v-model="ruleForm.name" placeholder="请输入商品名称"></el-input>
      </el-form-item >
      <el-form-item label="商品主图(限1张)" label-width="130px">
        <el-upload
        action="http://localhost:10010/goods/addGoods" //上传路径
          list-type="picture-card"
          :on-success="handleAvatarSuccess" //上传成功后的钩子(简称回调函数)
          ref="upload"
          :auto-upload="false" // 设置为false,意思是取消自动上传
          :limit="1" //如今的图片数量
          :data="ruleForm" //上传的其它数据
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
<el-button type="primary" @click="submit">提交</el-button>

1.2 js代码

//提交方法
    async submit() {
      this.$refs["ruleForm"].validate(valid => {
        this.$refs.upload.submit(); //图片上传
      });
    },
    /**文件上传成功后的操做 */
    handleAvatarSuccess(res) {
      console.info(res.data);
      this.$message.success("添加成功");
      this.ruleForm = {};
      this.$router.push("/goods/goodsList");
    },

2.后端 Java接口代码

/**
     * 添加一个商品(须要添加商品主图)
     * @param goods 商品信息 --> 这个就是前端上传的其它参数(本身封装便可)
     * @param file 图片
     * @param request request请求体
     * @return 返回是否添加成功
     */
    @PostMapping("/addGoods")
    public Result addGoods(Goods goods,
                           MultipartFile file,
                           HttpServletRequest request) {
        return goodsService.addGoods1(goods, file, request);
    }

若是有问题能够评论,看到会回复