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);
    }

若是有問題能夠評論,看到會回覆