vue学习经验总结（头像前裁切后上传）

本是古典何须时尚 2022-12-11 07:47 146阅读 0赞

1.需要的部分引用：

![20200929114250451.png][]

resurl后台传来的头像图片

2.封装组件部分：

html:

引用部分：

import { updatePhotoApi } from "@/request/api";
    import Cropper from "cropperjs";
    import { Indicator } from "mint-ui";
    import { setTimeout } from "timers";

![20200929114507405.png][]

事件部分：

mounted() {
        //初始化这个裁剪框
        this.headerImage = this.recUrl;
        //  console.log('渲染的图片是',this.headerImage)
        var self = this;
        var image = document.getElementById("image");
        this.cropper = new Cropper(image, {
          aspectRatio: 5 / 7,
          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;
    
          // console.log(url)
        },
        change(e) {
          if (e.target.files[0].size < 10240) {
            this.$message.error("图片不能小于10KB");
            return;
          }
          let files = e.target.files || e.dataTransfer.files;
          if (!files.length) return;
          this.panel = true;
          this.picValue = files[0];
          this.name = this.picValue.name;
          // console.log(this.picValue)
    
          this.url = this.getObjectURL(this.picValue);
          //每次替换图片要重新得到新的url
          if (this.cropper) {
            this.cropper.replace(this.url);
          }
          this.panel = true;
        },
        sureimg() {
          var self = this;
          Indicator.open("剪裁中...");
          this.panel = false;
          var croppedCanvas;
          var roundedCanvas;
          if (!this.croppable) {
            return;
          }
          setTimeout(function () {
            croppedCanvas = self.cropper.getCroppedCanvas();
            // Round
            roundedCanvas = self.getRoundedCanvas(croppedCanvas);
            self.headerImage = roundedCanvas.toDataURL();
            self.postImg();
          }, 100);
          // Crop
        },
        getRoundedCanvas(sourceCanvas) {
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          var width = sourceCanvas.width;
          var height = sourceCanvas.height;
          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() {
          //这边写图片的上传
          Indicator.close();
          this.$emit("imgfile", this.headerImage);
    
          // console.log("图片：",this.headerImage)
          //转blob
          // let array = [];
          // for(let i = 0; i < this.headerImage.length; i++) {
          //     array.push(this.headerImage.charCodeAt(i));
          // }
          // let dataImg = new Blob([new Uint8Array(array)], {type:'image/jpeg'});
          // console.log(dataImg)
          // let files = new window.File([dataImg], this.name, {type: 'image/jpeg'})
          function dataURLtoFile(dataurl, filename) {
            //将base64转换为文件
            var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
          }
          let files = dataURLtoFile(this.headerImage, this.name);
          // console.log(files)
          let formData = new FormData();
          formData.append("file", files);
          this.getToken(updatePhotoApi, formData, (res) => {
            // console.log(res)
            if (res.code == 200) {
              this.$message.success("操作成功");
            }
          });
        },
      },

let files=dataURLtoFile（）是将base64格式的图片路径转换成file文件流，然后传给后端

当然，如果后端可以转化，就不需要这步，看后端需要什么格式的相应做改变

css样式：

[20200929114250451.png]: /images/20221123/eb44b73c8d4b4910bb82d4a8a6566ea5.png
[20200929114507405.png]: /images/20221123/6c6b10a79ff54cd596c33250fdd99e63.png