vue的图片上传、裁剪，显示的vue-cropper

最新推荐文章于 2023-07-18 14:19:03 发布

xkxnq

最新推荐文章于 2023-07-18 14:19:03 发布

阅读量398

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/xkxnq/article/details/104876369

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

安装

npm install vue-cropper

使用

main.js里面

上传按钮

<div class="search-icon" >
            <label for="inputId" >
              上传
            </label>
            <input
              style="display: none"
              id="inputId"
              ref="input"
              type="file"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              @change="handleFileChange"
            />
 </div>

在这里插入图片描述
弹出层，放剪裁图片的cropper

    <div class="uploadBigImg" v-show="dialogVisible">
      <div class="operation-box">
        <div class="cropper-info">
          <div id="croppermain">
            <vueCropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="option.info"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixedBox="option.fixedBox"
              :centerBox="option.centerBox"
              :enlarge="option.enlarge"
              :mode="option.mode"
              :background="option.background"
              @realTime="realTime"
            ></vueCropper>
          </div>
        </div>
      </div>
    </div>
    //预览
	<div class="preview-box">
              <div class="preview" :style="previews.div">
                <img :src="previews.url" :style="previews.img" />
              </div>
      </div>

option是剪裁插件的属性配置，具体更多含义查看官网介绍

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      // 裁剪组件的基础配置option
       option: {
        img: "", // 裁剪图片的地址
        size: 1, // 剪切后的图片质量（0.1-1）
        full: false, // 输出原图比例截图 props名full
        outputType: "png", // 裁剪生成额图片的格式
        canMove: false, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        centerBox: true, //截图框是否被限制在图片里面
        // mode: "cover",
        background: false,
        enlarge: 0.1,
        fixedBox: false // 截图框固定大小
      },
      previews:{}
    }
  },
  methods: {
    handleFileChange(e){
    var _this = this;
      // 上传图片
      this.file = e.target.files[0];
      _this.fileName = this.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(this.file);
   },
    realTime(data) {
	    this.previews = data;
    }
}
</script>