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

分手后的思念是犯贱 2023-02-24 11:21 9阅读 0赞

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png]

# 如果有一定文档阅读能力可以看官网文档 #

[https://element.eleme.cn/\#/zh-CN/component/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接口代码 #

![up-eb5f137349369f332760ec81ecb4af5165c.png][]

/**
         * 添加一个商品(需要添加商品主图)
         * @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);
        }

**如果有问题可以评论,看到会回复**

[hot3.png]: /images/20230209/d887b19a7ac14d208924323b2de5dfa2.png
[30_ _hot3.png]: https://www.oschina.net/action/visit/ad?id=1221
[https_element.eleme.cn_zh-CN_component_upload]: https://element.eleme.cn/#/zh-CN/component/upload
[up-eb5f137349369f332760ec81ecb4af5165c.png]: /images/20230209/e8945a5755e44d2b839442ad9112d7a5.png