element UI表单组件，axios，请求到asp.net core 控制器，控制器无法接收到数据问题

页面代码

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >

    <el-form-item label="商品名称" prop="CommodityName">
        <el-input v-model="ruleForm.CommodityName" ></el-input>
    </el-form-item>


    <el-form-item label="商品类型" prop="CommodityType">
        <el-select v-model="ruleForm.CommodityType" placeholder="请选择商品类型" >
            <el-option label="一级" value="yiji"></el-option>
            <el-option label="二级" value="erji"></el-option>
            <el-option label="三级" value="sanji"></el-option>
            <el-option label="次品" value="cipin"></el-option>
        </el-select>
    </el-form-item>

    <el-form-item label="商品价格" prop="CommodityPrice">
        <el-input v-model="ruleForm.CommodityPrice"></el-input>
    </el-form-item>

    <el-form-item label="商品数量" prop="CommodityNumber">
        <el-input-number v-model="ruleForm.CommodityNumber" v-on:change="handleChange" :min="1" :max="99" label="描述文字" ></el-input-number>
    </el-form-item>

    <el-form-item label="商品详情" prop="CommodityDetails">
        <el-input  type="textarea" v-model="ruleForm.CommodityDetails" asp-for="CommodityDetails"  ></el-input>
    </el-form-item>

    <el-form-item label="商品图片" prop="img">
        <el-upload class="upload-demo"
                   @*上传的地址*@
                   action=" "
                   v-on:preview="handlePreview"
                   v-on:remove="handleRemove"
                   :file-list="ruleForm.CommodityPhoto"
                   list-type="picture"
                   :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" v-on:click="submitForm">立即添加</el-button>
        <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

</el-form>

请求代码

<script>
        new Vue({
            el: '#app',
            data() {
                return {
                    ruleForm: {
                        CommodityName: '',
                        CommodityType: '',
                        CommodityDetails: '',
                        CommodityNumber: 1,
                        CommodityPhoto: [],
                        CommodityPrice: ''
                    },
                    rules: {
                        CommodityName: [
                            { required: true, message: '请输入商品名称', trigger: 'blur' },
                            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        CommodityType: [
                            { required: true, message: '请选择商品类型', trigger: 'change' }
                        ],
                        CommodityDetails: [
                            { required: true, message: '请填写商品详情', trigger: 'blur' }
                        ],
                        CommodityPrice: [
                            { required: true, message: '请填写商品价格', trigger: 'blur' }
                        ]

                    }
                };
            },

            methods: {
                submitForm() {
                    console.log(this.ruleForm)
                    let params = {
                        CommodityName: this.ruleForm.CommodityName,
                        CommodityType: this.ruleForm.CommodityType,
                        CommodityDetails: this.ruleForm.CommodityDetails,
                        CommodityNumber: this.ruleForm.CommodityNumber,
                        CommodityPhoto: this.ruleForm.CommodityPhoto,
                        CommodityPrice: this.ruleForm.CommodityPrice
                    }
                    axios.post('https://localhost:5001/home/create', params).then(res => {

                    })

控制器代码

        [HttpPost]
        public IActionResult Create([FromBody] CommodityAddViewModel model)
        {
            Console.WriteLine(model);
            commodity newcommodity = new commodity
            {
                CommodityName = model.CommodityName,
                CommodityType = model.CommodityType,
                CommodityPrice = model.CommodityPrice,
                CommodityNumber = model.CommodityNumber,
                CommodityDetails = model.CommodityDetails,
                CommodityPhoto = model.CommodityPhoto
            };
            _commodityRepository.Add(newcommodity);
            return RedirectToAction("Index");
        }

运行后，拿不到请求发送的数据。

原因：
表单中存在一个element的上传组件，所以无法拿到数据

解决方法：
1、
将请求修改成

             axios({
                        method: 'post',
                        url: 'https://localhost:5001/home/create',
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        data: {
                            CommodityName: this.ruleForm.CommodityName,
                            CommodityType: this.ruleForm.CommodityType,
                            CommodityDetails: this.ruleForm.CommodityDetails,
                            CommodityNumber: this.ruleForm.CommodityNumber,
                            CommodityPhoto: this.ruleForm.CommodityPhoto,
                            CommodityPrice: this.ruleForm.CommodityPrice
                        },
                        transformRequest: [function (data, headers) {
                            const formData = new FormData()
                            for (const key of Object.keys(data)) {
                                formData.append(key, data[key] === null ? '' : data[key])
                            }
                            return formData
                        }]
                    });

加入一段代码即可运行。

2、
将页面上传组件删除即可成功拿到数据。