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？

裁剪图像并上传到Azure存储（VueJs）

0 个答案: