美文网首页Vue
Vue<头像剪切和上传>

Vue<头像剪切和上传>

作者: 誰在花里胡哨 | 来源:发表于2019-06-06 17:35 被阅读86次

    自家公司有头像上传功能,提前熟悉了下,然后就想着该怎么整了。网上很多都是用的 vue-cropper ,然后自己也学着搬运代码了。我主要是想用到移动端,不过这个插件PC端也是可以用的

    效果图

    gundong.gif

    首先 npm install --s vue-cropper

    代码如下

    <template>
      <div>
        <div class="cropper-content">
          <div class="cropper">
            <vueCropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="false"
              :fixed="true"
              :fixedNumber="[1,1]"
              :full="option.full"
              :centerBox="true"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixedBox="option.fixedBox"
              @realTime="realTime"
            ></vueCropper>
          </div>
        </div>
        <div class="bottom-button">
          <div class="selectImg">
            <span class="text">选择图片</span>
            <input
              type="file"
              class="uploads"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="uploadImg($event)"
            >
          </div>
          <!-- <span @click="down()">下载图片</span> -->
          <div class="uploading" @click="finish()">上传头像</div>
        </div>
      </div>
    </template>
    
    <script>
    import { VueCropper } from "vue-cropper";
    export default {
      components: {
        vueCropper: VueCropper
      },
      data() {
        return {
          headImg: "",
          //剪切图片上传
          crap: false,
          previews: {},
          option: {
            img: "",
            outputSize: 1, //剪切后的图片质量(0.1-1)
            full: false, //输出原图比例截图 props名full
            outputType: "png",
            canMove: true,
            original: false,
            canMoveBox: false,
            autoCrop: true,
            fixedBox: true
          },
          fileName: "", //本机文件地址
          downImg: "#",
          uploadImgRelaPath: "" //上传后的图片的地址(不带服务器域名)
        };
      },
      methods: {
        //上传图片(点击上传按钮)
        finish() {
          let _this = this;
          let formData = new FormData();
          // 输出
          this.$refs.cropper.getCropBlob(data => {
            let img = window.URL.createObjectURL(data);
            console.log(data);
            formData.append("file", data, this.fileName);
            _this.$message({
              //element-ui的消息Message消息提示组件
              type: "success",
              message: "上传成功"
            });
          });
        },
        // 实时预览函数
        realTime(data) {
          console.log(data);
          this.previews = data;
        },
        //下载图片
        down() {
          var aLink = document.createElement("a");
          aLink.download = "author-img";
          this.$refs.cropper.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            aLink.href = window.URL.createObjectURL(data);
            aLink.click();
          });
        },
        //选择本地图片
        uploadImg(e) {
          var _this = this;
          //上传图片
          var file = e.target.files[0];
          _this.fileName = file.name;
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
            return false;
          }
          var reader = new FileReader();
          reader.onload = e => {
            let data;
            if (typeof e.target.result === "object") {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]));
            } else {
              data = e.target.result;
            }
            _this.option.img = data;
          };
          // 转化为base64
          // reader.readAsDataURL(file)
          // 转化为blob
          reader.readAsArrayBuffer(file);
        }
      }
    };
    </script>
    
    <style lang="scss">
    // 底部按钮建
    .bottom-button {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      box-sizing: border-box;
      .uploading {
        width: 80px;
        height: 2rem;
        line-height: 2rem;
        background: #40ce53;
        color: white;
        border-radius: 0.25rem;
        font-size: 0.8rem;
      }
      .selectImg {
        width: 80px;
        height: 2rem;
        line-height: 2rem;
        color: white;
        font-size: 0.8rem;
        background: #65a2e7;
        border-radius: 0.25rem;
        position: relative;
      }
      .text{
         position: absolute;
         z-index: 5;
         left: 15px;
      }
      .uploads {
        opacity: 0;
        position: absolute;
        z-index: 99;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
    //改变背景色
    .cropper-box {
      background: #333 !important;
    }
    //使截图框变为圆形
    .cropper-crop-box {
      overflow: hidden;
      border-radius: 50% !important;
    }
    //截图相关样式
    .cropper-content {
      display: flex;
      display: -webkit-flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
      .cropper {
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .show-preview {
        flex: 1;
        -webkit-flex: 1;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        .preview {
          overflow: hidden;
          border-radius: 50%;
          border: 1px solid #cccccc;
          background: #cccccc;
          margin-left: 40px;
        }
      }
    }
    </style>
    

    具体插件参数请参考:https://www.npmjs.com/package/vue-cropper/v/0.4.7
    有兴趣的小伙伴可以去这个地址看下其他功能(图片旋转,放大,缩小等),本人就是参考这个地址改造的~~
    代码搬运地址:https://www.cnblogs.com/libo0125ok/p/9296011.html

    相关文章

      网友评论

        本文标题:Vue<头像剪切和上传>

        本文链接:https://www.haomeiwen.com/subject/fjvuxctx.html