el-upload+vue-dropper

参考

安装

npm install vue-cropper

局部引入

<el-row>
<el-col :span="24">
  <el-form-item label="视频封面">
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-change="selectChange"
      accept="image/*"
      :auto-upload="false">
      <img v-if="dataForm.videoCover" :src="dataForm.videoCover" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <p class="coverTip" style="display:block;line-height:82px;float:left;margin-left:20px;color:#c0c4cc;">温馨提示：图片尺寸建议为564*340，支持(jpg/png/jpeg格式)，图片小于100KB</p>
  </el-form-item>
</el-col>
</el-row>

<!-- 截图弹窗 -->
<el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
<vue-cropper-img
  ref="cropper"
  :img="option.img"
  :auto-crop="option.autoCrop"
  :auto-crop-width="option.autoCropWidth"
  :auto-crop-height="option.autoCropHeight"
  :fixed="option.fixed"
  :fixed-number="option.fixedNumber"
  style="width:100%;height:300px;"
></vue-cropper-img>
<span slot="footer" class="dialog-footer">
  <el-button @click="cancelCrop">取 消</el-button>
  <el-button type="primary" @click="cropImage">确 定</el-button>
</span>
</el-dialog>

import {VueCropper  as VueCropperImg} from 'vue-cropper' 
export default {
data() {
    //截图
    option: {
      img: '', // 裁剪图片的地址
      autoCrop: true, // 是否默认生成截图框
      // 只有自动截图开启 宽度高度才生效
      autoCropWidth: 180, // 默认生成截图框宽度
      autoCropHeight: 120, // 默认生成截图框高度
      fixed: true, // 是否开启截图框宽高固定比例  (默认:true),-----变为FALSE就可以任意拉伸
      fixedNumber: [3, 2] // 截图框的宽高比例
    },
    dialogVisible: false, //剪切窗口是否显示
    imgFileObj: {
      imgFileName: '',//文件名称
      imgFileType: '',//文件类型
    },
}
components:{
  VueCropperImg
},
methods: {
  //------------------   视频封面方法
  // 上传文件（测试下）
//图片预览
selectChange(file){
  console.log(file)
  this.imgFileObj.imgFileName = file.name;
  this.imgFileObj.imgFileType = file.raw.type;
  const { raw } = file;
  this.openCropper(raw);
},
openCropper (file) {
  var files = file;
  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(files);
  this.dialogVisible = true;
},
//封面图-截切图片地址--确认截取
cropImage() {
  this.$refs.cropper.getCropBlob((data) => {
    let files = new window.File([data], this.imgFileObj.imgFileName,{type: this.imgFileObj.imgFileType })
    console.log('-=-=',files)
    this.uploadImgAction(files)
  })
},
//封面图-截切取消
cancelCrop() {
  this.dialogVisible = false;
},
uploadImgAction(file){
  const isLtKB = file.size / 1024  < 100;
  if (!isLtKB) {
    this.$message.error("上传图片大小不能超过 100KB!");
    return;
  }
  // let url = window.SITE_CONFIG.wqrcUrl + "/info_index/index/uploadImg.html"
  let param = new FormData();
  param.append("file", file, this.imgFileName);
  let url = this.$http.uploadUrl("proxyUpload")
  this.$http({
    method: "post",
    url: url,
    data: param,
    headers: {
      "Content-Type": "multipart/form-data"
    },
    transformRequest: [
      function(data) {
        return data;
      }
    ]
  }).then(({ data }) => {
    if (data && data.code == 200) {
      this.dialogVisible = false;
      this.dataForm.videoCover = window.SITE_CONFIG.wqrcUrl+data.url
      // this.dataForm.videoCover = window.SITE_CONFIG.wqrcUrl + data.url
      // this.dataForm.logo = "/upload/" + data.path;
      // this.dataForm.logo2 = window.SITE_CONFIG.wqrcUrl+"/upload/" + data.path;
    }
  });
},