rails&vue&postgresqlでのファイルの扱い

バックエンドをrails、フロントエンドはvueを使ってDBに保存したいのですが、どうしても出来なくてとても困っています、、、carrierwaveを使っているのですがどうやればいいのでしょうか？

microposts_controller.rb

class Api::V1::MicropostsController < ApplicationController

    rescue_from ActiveRecord::RecordNotFound do |exception|
        render json: { error: '404 not found' }, status: 404
      end
    def new
        
    end
    
    def create
        micropost = current_user.microposts.build(micropost_params)
        if micropost.save
          render json: micropost, status: :created
        else
          render json: { errors: micropost.errors.full_messages }, status: :unprocessable_entity
        end
      end
    private

    def micropost_params
        params.require(:micropost).permit(:content, :picture)
    end
end

micropost.rb

class Micropost < ApplicationRecord
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  mount_uploader :picture, PictureUploader
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
  mount_uploader :picture, ImageUploader
end

app.vue

<template>
  <div id="app" class="container">
    <form @submit.prevent="createMicroposts">
      <div v-if="errors.length != 0">
        <ul v-for="e in errors" :key="e">
          <li>
            <font color="red">{{ e }}</font>
          </li>
        </ul>
      </div>
      <div>
        <label>content</label>
        <input v-model="microposts.content" type="text" />
      </div>
      <div class="input-item">
        <label class="input-item__label">
          画像を選択
          <input type="file" @change="onFileChange" />
        </label>
      </div>

      <button type="submit">Commit</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function() {
    return {
      microposts: {
        content: "",
        picture: "",
      },
      errors: ""
    };
  },
  methods: {
    onFileChange(e) {
      const files = e.target.files || e.dataTransfer.files;
      this.picture = files;
    },

    createMicroposts: function() {
      axios
        .post("/api/v1/microposts", this.microposts)
        .then(response => {
          console.log(this.microposts)
          let e = response.data;
          this.$router.push({
            name: "MicropostPage",
            params: { id: e.id }
          });
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    }
  }
};
</script>

<style scoped>
.container {
  width: 935px;
}
p {
  font-size: 2em;
  text-align: center;
}
</style>

色々調べているのですが全く解決法がみつからないです、dbには画像以外しっかり保存してくれてるんですけど、画像だけがどうしても空になってしまいます。
些細なヒントでも構いませんので助けてください。