(精华)2020年7月17日 vue vue-image-crop-upload头像上传

npm install vue-image-crop-upload
npm install –save-dev babel-polyfill

  

 

  
1
  
2
 

<template>
  <div id="app">
    <button class="btn" @click="toggleShow">设置头像</button>
    <my-upload
    @crop-success="cropSuccess"
    @crop-upload-success="cropUploadSuccess"
    @crop-upload-fail="cropUploadFail"
    v-model="show"
    :width="200"
    :height="200"
    img-format="png"
    :size="size"
    langType='zh'
    :noRotate='false'
    field="Avatar1"
    url="https://httpbin.org/post"></my-upload>
    <img :src="imgDataUrl">
  </div>
</template>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

<script>
  import 'babel-polyfill'; // es6 shim
  import myUpload from 'vue-image-crop-upload';
  export default {
    data() {
      return {
        imgDataUrl: "",
        show: false,
        size:2.1
      }
    },
    components: {
      "my-upload": myUpload
    },
    methods: {
        toggleShow() {
            this.show = !this.show;
        },
        cropSuccess(imgDataUrl, field) {
            console.log('-------- crop success --------',imgDataUrl, field);
        },
        //上传成功回调
        cropUploadSuccess(jsonData, field){
            console.log('-------- upload success --------');
            this.imgDataUrl = jsonData.files.Avatar1;
            console.log(jsonData);
            console.log('field: ' + field);
        },
        //上传失败回调
        cropUploadFail(status, field){
            console.log('-------- upload fail --------');
            console.log('上传失败状态'+ status);
            console.log('field: ' + field);
        }
    }
 
  }
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

具体使用可以参考官方文档https://github.com/dai-siki/vue-image-crop-upload

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107406783