element-ui upload上传图片的一次坑

在实现图片上传时遇到了一个坑，十分难受，还是技术不到位，记录下来：
主要代码：

//组件使用：
 		<el-upload
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadFile"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

//方法
uploadFile(event) {
      const file = event.file
      const param = new FormData(); // 创建form对象
      param.append('uploadFile', file); // 对应后台接收图片名
      aaa(param).then(res => {
        console.log(res);
      });
    },

事情是这样的，在实现功能时没有创建form对象，而是直接向后台传了file，导致后台接受到的值只有uid或者是空值，像图片这样：

或者file明明打印出来有值，但是传过去就是null，在创建了form对象，并且将值放入form对象后，传值就正常了：

当然，这个是想实现不在action中写路径，在下面的方法中实现上传，如果直接使用action的话就没有出现这种情况。