Обрезать изображение и загрузить в хранилище Azure (VueJs)

Question

Я использую vue-core-image-upload Плагин, чтобы применить процесс обрезки изображения и изменить его размер, а затем загрузить в хранилище Azure.

Итак, сначала пользователь выберет изображение, которое он хочет загрузить. тогда плагин позволит ему изменить размер изображения и обрезать его до квадратной формы.

что я делал, пока не узнал это:

<template>

<div class="center">
    <div class="user">
        <img class="avatar" :src="src"/>
    </div>
    <div class="user">
        <img class="avatar" :src="cropSrc"/>
    </div>
    <vue-core-image-upload
        :class = "['btn', 'btn-primary']"
        crop="server"
        @imageuploaded="crpoServerImageUploaded"
        :max-file-size = "10485760"
        url = "your server url"
        text = "Upload Image"
        extensions = "png,gif,jpeg,jpg"
        cropRatio = "1:1"
        :cropBtn = "{ok:'Save','cancel':'Cancel'}"
        maxWidth = "200"
        maxheight = "200"
        inputAccept = "image/*"
        :headers = "{auth: xxxxx}"
    >
    </vue-core-image-upload>
</div>

</template>

<script>
import VueCoreImageUpload  from 'vue-core-image-upload';

export default {
  components: { 'vue-core-image-upload': VueCoreImageUpload, },
  data() {
    return {
      src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
      cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
      cropArgs: {
        toCropImgH: '?',
        toCropImgW: '?',
        toCropImgX: '?',
        toCropImgY: '?',
        toCropDegrees: '?',
      }
    }
  },
  created() {
        var Curr_user = JSON.parse(localStorage.getItem("CurrentUser"));
        var id = Curr_user['id'];

        consloe.log();
  },
  methods: {
    CheckImgavailability: function() {

    },
    crpoServerImageUploaded(res) {
      if (res.errcode === 0) {
        if (res.data.src) {
          this.src = res.data.src;
          return;
        }
        this.name = res.data.name;
        this.cropArgs = {
          toCropImgH: parseInt(res.data.post.toCropImgH),
          toCropImgW: parseInt(res.data.post.toCropImgW),
          toCropImgX: parseInt(res.data.post.toCropImgX),
          toCropImgY: parseInt(res.data.post.toCropImgY),
          toCropDegrees: parseInt(res.data.post.toCropDegrees),
        }
      this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
      }
    }
  }
};
</script>

<style scoped>

.avatar {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.05);
}

</style>

И у меня есть несколько вопросов:

:headers = "{auth: xxxxx}" заголовки моего запроса следующие:

"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods": "PUT",
"Access-Control-Allow-Headers": "x-ms-*,content-*",
"Content-Type": "image/png",
"x-ms-date": currentDate,
"x-ms-version": sv,
"x-ms-blob-type": "BlockBlob",

где currentDate и sv являются переменными, как я могу связать их с HTML?

и в url = "your server url" я должен добавить путь Azure? например: https://XXXXX.blob.core.windows.net/avatar-user/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

что если у меня есть переменные внутри пути? Как я могу добавить к пути и связать его с HTML?