vue移動端頭像上傳，不大於50K

標籤：color   外掛程式   smooth   使用者   files   加油   .post   oom   做了   

先看效果：

稍加說明一下：第一張圖是user.vue，第二張圖是點擊頭像出現的系統內建上傳檔案格式（安卓和IOS不一樣），第三張圖是cropper組件（我單獨設定的），第四張圖是上傳完成的user.vue。

其實外掛程式不難，只不過為了契合項目和移動端，做了些修改。

官方介紹：https://www.npmjs.com/package/cropperjs

第一步：安裝外掛程式

cnpm install cropperjs --save

第二步：分離設定成外掛程式cropper.vue

<template>  <div id="demo" class="cropperImg">    <!-- 遮罩層 -->    <div class="container" v-show="panel">      <div>        <img id="image" :src="url" alt="Picture">      </div>      <button type="button" id="button" @click="crop">確定</button>    </div>    <div>        <div class="show" style="height:56px;width:56px;">          <div class="picture" :style="‘backgroundImage:url(‘+headerImage+‘)‘" style="height:56px;width:56px;">          </div>        </div>        <div style="opacity:0;width:360px;position:absolute;top:0;right:0;height:56px;">          <input type="file" id="change" accept="image" @change="change" style="height:56px;">          <label for="change"></label>        </div>    </div>  </div></template><script>import Cropper from ‘cropperjs‘  //引入外掛程式export default {  props:{      headerImage:{   //從user.vue父組件傳過來資料庫圖片，即使用者從本地上傳的圖片      type:String,      default:‘‘    }  },  data () {    return {      picValue:‘‘,      cropper:‘‘,      croppable:false,      panel:false,      url:‘‘,      postHeaderImg:‘‘    }  },  mounted () {    //初始化這個裁剪框    var self = this;    var image = document.getElementById(‘image‘);    this.cropper = new Cropper(image, {      aspectRatio: 1,       viewMode: 1,      background:false,      zoomable:false,      ready: function () {        self.croppable = true;      }    });  },  methods: {    getObjectURL (file) {      var url = null ;       if (window.createObjectURL!=undefined) { // basic        url = window.createObjectURL(file) ;      } else if (window.URL!=undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file) ;      } else if (window.webkitURL!=undefined) { // webkit or chrome        url = window.webkitURL.createObjectURL(file) ;      }      return url ;    },    change (e) {      let files = e.target.files || e.dataTransfer.files;      if (!files.length) return;      this.panel = true;      this.picValue = files[0];            this.url = this.getObjectURL(this.picValue);      //每次替換圖片要重新得到新的url      if(this.cropper){        this.cropper.replace(this.url);      }      this.panel = true;    },    crop () {        this.panel = false;        var croppedCanvas;        var roundedCanvas;        if (!this.croppable) {          return;        }        // Crop        croppedCanvas = this.cropper.getCroppedCanvas();        console.log(this.cropper)        // Round        roundedCanvas = this.getRoundedCanvas(croppedCanvas);        this.postHeaderImg = roundedCanvas.toDataURL();        //傳遞給父組件        this.$emit(‘getHeaderImage‘,roundedCanvas.toDataURL());        this.postImg()//上傳圖片            },    getRoundedCanvas (sourceCanvas) {            var canvas = document.createElement(‘canvas‘);      var context = canvas.getContext(‘2d‘);      var width = sourceCanvas.width;      var height = sourceCanvas.height;      //為了每張圖片的大小不超過50k,所以不論裁剪多大，最後上傳的，最大寬度不超過90。      if(width > 90){        width = 90      }      if(height > 90){        height = 90      }            canvas.width = width;      canvas.height = height;      context.imageSmoothingEnabled = true;      context.drawImage(sourceCanvas, 0, 0, width, height);      context.globalCompositeOperation = ‘destination-in‘;      context.beginPath();      context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);      context.fill();      return canvas;    },    postImg () {      this.$http.post(        this.http_h + "bp/user/uploadHeadImage",        {          fieldName:this.postHeaderImg        },      ).then((res)=>{        let response = res.body;        if(response.code == 200){          this.$vux.toast.show({            type:"success",            text: "上傳頭像成功",            time:1000          })        }else{          this.$vux.toast.show({            type:"text",            text: response.message,            time:1000          })        }      });    }  }}</script>

　

第三步：設定父組件

首先：引入組件

import cropper from "@/components/cropper"

然後：在父組件你需要設定頭像的地方，

<cropper :headerImage="headerImage"  @getHeaderImage="newHeaderImage"></cropper>　

 小小解釋一下：:headerImage="headerImage"（傳遞給子組件）

組件通過emit 事件方式上傳給父組件更改之後的圖片，然後父組件通過newHeaderImage事件來接收。

newHeaderImage(newImg){  this.headerImage = newImg;}

　

第四步：測試

 

總結：cropper在移動端，可能會有圖片位移現象，這就需要你來根據你的項目修改css了，我也是做了修改才符合我們UI的效果。在vue-cli 項目中node_modules檔案中，直接就可以找到。希望能幫到你！加油

 

vue移動端頭像上傳，不大於50K