vuecropper图片裁剪上传参考示例

我就是我 2022-10-29 07:50 329阅读 0赞

<template>
      <div>
        <el-row>
          <el-col :span="10">
            <div class="cropper">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
                @imgLoad="imgLoad"
              ></vueCropper>
            </div>
            <div style="margin-left: 20px">
              <div
                class="show-preview"
                :style="{ 
                  width: '150px',
                  height: '155px',
                  overflow: 'hidden',
                  margin: '5px',
                }"
              >
                <div class="preview">
                  <img :src="previews.url" :style="previews.img" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          
    
          <el-upload
            class="upload-demo"
            :show-file-list="false"
            :on-change="handlePreview"
            multiple
            :auto-upload="false"
            action="#"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <el-button type="primary" size="mini" @click="changeScale(1)"
            >+</el-button
          >
          <el-button type="primary" size="mini" @click="changeScale(-1)"
            >-</el-button
          >
          <el-button type="primary" size="mini" @click="rotateLeft">↺</el-button>
          <el-button type="primary" size="mini" @click="rotateRight">↻</el-button>
          <el-button type="primary" size="mini" @click="down('blob')">↓</el-button>
    
          <input
            type="button"
            class="btn btn-blue"
            value="上传头像"
            @click="finish('blob')"
          />
        </el-row>
    
        <img :src="test">
      </div>
    </template>
    
    <script>
    // import VueCropper from 'vue-cropper'
    import {  VueCropper } from "vue-cropper";
    // import Api from '@/js/api.js' //接口url配置文件
    
    export default { 
      data() { 
        return { 
          dialogFormVisible: true,
          headImg: "",
          test:"",
          //剪切图片上传
          crap: false,
          previews: { },
          option: { 
            img: "",
            outputSize: 1, //剪切后的图片质量（0.1-1）
            full: false, //输出原图比例截图 props名full
            outputType: "png",
            canMove: true,
            original: false,
            canMoveBox: true,
            autoCrop: true,
            autoCropWidth: 150,
            autoCropHeight: 150,
            fixedBox: true,
          },
          fileName: "", //本机文件地址
          downImg: "#",
          imgFile: "",
          uploadImgRelaPath: "", //上传后的图片的地址（不带服务器域名）
        };
      },
      components: { 
        VueCropper,
      },
      methods: { 
        //放大/缩小
        changeScale(num) { 
          console.log("changeScale");
          num = num || 1;
          this.$refs.cropper.changeScale(num);
        },
        //坐旋转
        rotateLeft() { 
          console.log("rotateLeft");
          this.$refs.cropper.rotateLeft();
        },
        //右旋转
        rotateRight() { 
          console.log("rotateRight");
          this.$refs.cropper.rotateRight();
        },
        //上传图片（点击上传按钮）
        finish(type) { 
          console.log("finish");
          let _this = this;
          let formData = new FormData();
    
          this.$refs.cropper.getCropBlob((data) => { 
            var _this = this;
            var read = new FileReader();
            read.readAsDataURL(data);
            read.onload = function (e) { 
              _this.test = this.result;
              console.log(this.result);
            };
          });
    
          // 输出
          // if (type === 'blob') { 
          // this.$refs.cropper.getCropBlob((data) => { 
          // let img = window.URL.createObjectURL(data)
          // this.model = true;
          // this.modelSrc = img;
          // formData.append("file", data, this.fileName);
          // this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})
          // .then((response)=>{ 
          // var res = response.data;
          // if(res.success == 1){ 
          // $('#btn1').val('');
          // _this.imgFile = '';
          // _this.headImg = res.realPathList[0]; //完整路径
          // _this.uploadImgRelaPath = res.relaPathList[0]; //非完整路径
          // _this.$message({　　//element-ui的消息Message消息提示组件
          // type: 'success',
          // message: '上传成功'
          // });
          // }
          // })
          // })
          // } else { 
          // this.$refs.cropper.getCropData((data) => { 
          // this.model = true;
          // this.modelSrc = data;
          // })
          // }
        },
        // 实时预览函数
        realTime(data) { 
          console.log("realTime");
          this.previews = data;
          console.log(this.previews);
        },
        //下载图片
        down(type) { 
          console.log("down");
          var aLink = document.createElement("a");
          aLink.download = "author-img";
          if (type === "blob") { 
            this.$refs.cropper.getCropBlob((data) => { 
              this.downImg = window.URL.createObjectURL(data);
              aLink.href = window.URL.createObjectURL(data);
              aLink.click();
            });
          } else { 
            this.$refs.cropper.getCropData((data) => { 
              this.downImg = data;
              aLink.href = data;
              aLink.click();
            });
          }
        },
        handlePreview(file) { 
          file = file.raw;
          var _this = this;
          var read = new FileReader();
          read.readAsDataURL(file);
          read.onload = function (e) { 
            _this.option.img = this.result;
          };
        },
        //选择本地图片
        uploadImg(e, num) { 
          console.log("uploadImg");
          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;
            }
            if (num === 1) { 
              _this.option.img = data;
            } else if (num === 2) { 
              _this.example2.img = data;
            }
          };
          // 转化为base64
          // reader.readAsDataURL(file)
          // 转化为blob
          reader.readAsArrayBuffer(file);
        },
        imgLoad(msg) { 
          console.log("imgLoad");
          console.log(msg);
        },
      },
    };
    </script>
    
    <style>
    .info { 
      width: 720px;
      margin: 0 auto;
    }
    
    .oper-dv { 
      height: 20px;
      text-align: right;
      margin-right: 100px;
    }
    
    a { 
      font-weight: 500;
    }
    
    .last-child { 
      margin-left: 30px;
    }
    
    .info-item { 
      margin-top: 15px;
    }
    
    label { 
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    
    .sel-img-dv { 
      position: relative;
    }
    
    .sel-file { 
      position: absolute;
      width: 90px;
      height: 30px;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }
    
    .sel-btn { 
      position: absolute;
      cursor: pointer;
      z-index: 1;
    }
    
    .cropper-content { 
      display: flex;
      display: -webkit-flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
    }
    
    .cropper { 
      width: 260px;
      height: 260px;
    }
    
    .show-preview { 
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
    }
    
    .preview { 
      overflow: hidden;
    
      border: 1px solid #cccccc;
      background: #cccccc;
      margin-left: 0px;
    }
    
    .cropper-content .show-preview .preview { 
      margin-left: 0;
    }
    </style>