浏览器Http的413报错

简单记录图片裁剪组件

vue3+td-design

子组件

<template>
  <div>
    <input id="fileBtn" ref="reuploadInput" type="file" accept="image/*" style="display: none" @change="onChange" />
    <t-dialog
      :visible="dialogVisible"
      :title="'图片裁剪'"
      width="50%"
      custom-class="upload_dialog"
      @close="dialogVisible = false"
    >
      <div class="cropper">
        <div class="cropper_left">
          <vueCropper
            ref="cropperRef"
            :style="{ width: '400px' }"
            :img="options.img"
            :info="true"
            :info-true="options.infoTrue"
            :auto-crop="options.autoCrop"
            :fixed-box="options.fixedBox"
            :can-move="options.canMoveBox"
            :can-scale="options.canScale"
            :fixed-number="fixedNumber"
            :fixed="options.fixed"
            :full="options.full"
            :center-box="options.centerBox"
            @real-time="previewHandle"
          />
          <div class="reupload_box">
            <div class="reupload_text" @click="uploadFile('reload')">重新上传</div>
            <div>
              <t-space>
                <ZoomInIcon @click="changeScale(1)" />
                <ZoomOutIcon @click="changeScale(-1)" />
                <OrderAdjustmentColumnIcon @click="rotateRight" />
              </t-space>
            </div>
          </div>
        </div>

        <div class="cropper_right">
          <div class="preview_text">预览</div>
          <div :style="getStyle" class="previewImg">
            <div :style="previewFileStyle">
              <img :style="previews.img" :src="previews.url" alt="" />
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <t-button @click="dialogVisible = false">取消</t-button>
          <t-button theme="default" @click="refreshCrop">重置</t-button>
          <t-button theme="primary" @click="onConfirm"> 确认 </t-button>
        </span>
      </template>
    </t-dialog>
  </div>
</template>

<script lang="ts" setup>
// 需要引入的库
import { VueCropper } from 'vue-cropper';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, watch, reactive } from 'vue';
import 'vue-cropper/dist/index.css';
import { ZoomInIcon, ZoomOutIcon, OrderAdjustmentColumnIcon } from 'tdesign-icons-vue-next';
import { uploadFile as uploadFixFile } from '@/api/upload';
const dialogVisible = ref<boolean>(false); // dialog的显示与隐藏

const emits = defineEmits(['confirm']); // 自定义事件

// 裁剪组件需要使用到的参数
interface Options {
  img: string | ArrayBuffer | null; // 裁剪图片的地址
  info: true; // 裁剪框的大小信息
  outputSize: number; // 裁剪生成图片的质量 [1至0.1]
  outputType: string; // 裁剪生成图片的格式
  canScale: boolean; // 图片是否允许滚轮缩放
  autoCrop: boolean; // 是否默认生成截图框
  autoCropWidth: number; // 默认生成截图框宽度
  autoCropHeight: number; // 默认生成截图框高度
  fixedBox: boolean; // 固定截图框大小 不允许改变
  fixed: boolean; // 是否开启截图框宽高固定比例
  fixedNumber: Array<number>; // 截图框的宽高比例  需要配合centerBox一起使用才能生效
  full: boolean; // 是否输出原图比例的截图
  canMoveBox: boolean; // 截图框能否拖动
  original: boolean; // 上传图片按照原始比例渲染
  centerBox: boolean; // 截图框是否被限制在图片里面
  infoTrue: boolean; // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: string; // 上传允许的格式
}

// 父组件传参props
interface IProps {
  type: string; // 上传类型, 企业logo / 浏览器logo
  allowTypeList: string[]; // 接收允许上传的图片类型
  limitSize: number; // 限制大小
  fixedNumber: number[]; // 截图框的宽高比例
  fixedNumberAider?: number[]; // 侧边栏收起截图框的宽高比例
  previewWidth: number; // 预览宽度
  title?: string; // 裁剪标题
}

// 预览样式
interface IStyle {
  width: number | string;
  height: number | string;
}

/* 父组件传参 */
const props = withDefaults(defineProps<IProps>(), {
  type: 'systemLogo',
  allowTypeList: () => ['jpg', 'png', 'jpeg'],
  limitSize: 1,
  fixedNumber: () => [1, 1],
  fixedNumberAider: () => [1, 1],
  previewWidth: 228,
  title: 'LOGO裁剪',
});

// 裁剪组件需要使用到的参数
const options = reactive<Options>({
  img: '', // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 200, // 默认生成截图框的宽度
  autoCropHeight: 200, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'png', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
  full: true, // 是否输出原图比例的截图
  canMoveBox: false, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
});

const getStyle = ref<IStyle>({
  width: '',
  height: '',
});

/* 允许上传的类型 */
const acceptType = ref<string[]>([]);

// 裁剪后的预览样式信息
const previews: any = ref({});
const previewFileStyle = ref({});

// 裁剪组件Ref
const cropperRef: any = ref({});
// input组件Ref
const reuploadInput = ref<HTMLElement | null | undefined>();

// 回显图片使用的方法
const onChange = (e: any) => {
  const file = e.target.files[0];
  const URL = window.URL || window.webkitURL;
  // 上传图片前置钩子，用于判断限制类型用
  if (beforeUploadEvent(file)) {
    options.img = URL.createObjectURL(file);
    dialogVisible.value = true;
  }
};

/* 上传图片前置拦截函数 */
const beforeUploadEvent = (file: File) => {
  const type = file.name.substring(file.name.lastIndexOf('.') + 1); // 获得图片上传后缀
  // 判断是否符合上传类型
  const isAllowTye = props.allowTypeList.some((item) => {
    return item === type;
  });
  if (!isAllowTye) {
    MessagePlugin.error(`仅支持${acceptType.value.join('、')}格式的图片`);
    return false;
  }
  return true;
};

/* 重置裁剪组件 */
const refreshCrop = () => {
  // cropperRef裁剪组件自带很多方法，可以打印看看
  cropperRef.value.refresh();
};

/* 右旋转图片 */
const rotateRight = () => {
  cropperRef.value.rotateRight();
};

/* 放大缩小图片比例 */
const changeScale = (num: number) => {
  const scale = num || 1;
  cropperRef.value.changeScale(scale);
};

// 缩放的格式
const tempScale = ref<number>(0);

// 点击上传
const uploadFile = (type: string): void => {
  /* 打开新的上传文件无需生成新的input元素 */
  if (type === 'reupload') {
    reuploadInput.value?.click();
    return;
  }
  let input: HTMLInputElement | null = document.createElement('input');
  input.type = 'file';
  input.accept = options.accept;
  input.onchange = onChange;
  input.click();
  input = null;
};

/* 上传成功方法 */
const cropperSuccess = async (dataFile: File) => {
  const data = await uploadFixFile({
    multipartFile: dataFile,
  });
  return data || '';
};

// base64转图片文件
const dataURLtoFile = (dataUrl: string, filename: string) => {
  const arr = dataUrl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let len = bstr.length;
  const u8arr = new Uint8Array(len);
  while (len--) {
    u8arr[len] = bstr.charCodeAt(len);
  }
  return new File([u8arr], filename, { type: mime });
};

// 上传图片（点击保存按钮）
const onConfirm = () => {
  cropperRef.value.getCropData(async (data: string) => {
    const dataFile: File = dataURLtoFile(data, 'images.png');
    if (dataFile.size > 1024 * 1024 * 5) {
      MessagePlugin.error('图片大于5M，请选择其他图片');
      return;
    }
    const res = await cropperSuccess(dataFile);
    dialogVisible.value = false;
    // 触发自定义事件
    emits('confirm', res);
    return res;
  });
};

// 裁剪之后的数据
const previewHandle = (data: any) => {
  previews.value = data; // 预览img图片
  tempScale.value = props.previewWidth / data.w;
  previewFileStyle.value = {
    width: data.w + 'px',
    height: data.h + 'px',
    margin: 0,
    overflow: 'hidden',
    zoom: tempScale.value,
    position: 'relative',
    border: '1px solid #e8e8e8',
    'border-radius': '50%',
  };
};

watch(
  () => props,
  () => {
    /* 预览样式 */
    getStyle.value = {
      width: props.previewWidth + 'px', // 预览宽度
      height: props.previewWidth / props.fixedNumber[0] + 'px', // 预览高度
    };
    // 上传格式tips信息
    acceptType.value = [];
    for (let i = 0; i < props.allowTypeList.length; i++) {
      acceptType.value.push(props.allowTypeList[i].toUpperCase());
    }
  },
  {
    deep: true,
  },
);

/* 向子组件抛出上传事件 */
defineExpose({
  uploadFile,
});
</script>
<style lang="less" scoped>
.add-icon,
.cal-icon,
.roa-icon {
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.cropper {
  width: 100%;
  height: 50vh;
  display: flex;
  overflow: hidden;
  .cropper_left {
    display: flex;
    flex-direction: column;
    .reupload_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      .reupload_text {
        color: var(--primary-color);
        cursor: pointer;
      }
      .rotate_right {
        margin-left: 16px;
        cursor: pointer;
      }
    }
  }
  .cropper_right {
    flex: 1;
    margin-left: 44px;
    .preview_text {
      margin-bottom: 12px;
    }
  }
}
</style>

vue2+element ui

<template>
  <!-- vueCropper 剪裁图片实现-->
  <div>
    <input
      id="fileBtn"
      ref="reuploadInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="onChange"
    />
    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
    >
      <div style="display: flex">
        <div>
          <div class="cropper-content">
            <div class="cropper" style="text-align: center">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :output-size="option.size"
                :output-type="option.outputType"
                :info="true"
                :full="option.full"
                :can-move="option.canMove"
                :can-move-box="option.canMoveBox"
                :original="option.original"
                :auto-crop="option.autoCrop"
                :fixed="option.fixed"
                :fixed-number="option.fixedNumber"
                :center-box="option.centerBox"
                :info-true="option.infoTrue"
                :fixed-box="option.fixedBox"
                @real-time="previewHandle"
              ></vueCropper>
            </div>
          </div>
          <div style="margin-top: 20px">
            <el-button @click="uploadFile('reload')"> 重新上传 </el-button>
            <el-button @click="handleBigImage">放大图片</el-button>
            <el-button @click="handleSmallImage">缩小图片</el-button>
            <el-button @click="handleRotateImage">旋转图片</el-button>
          </div>
        </div>
        <div class="cropper_right">
          <div class="preview_text">预览</div>
          <div :style="getStyle" class="previewImg">
            <div :style="previewFileStyle">
              <img :style="previews.img" :src="previews.url" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: "", // 需要剪裁的图片
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框的宽度
        autoCropHeight: 85, // 默认生成截图框的长度
        fixedBox: false, // 是否固定截图框的大小 不允许改变
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [50, 17], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        accept: "image/jpeg,image/jpg,image/png,image/gif,image/x-icon",
      },
      picsList: [], //页面显示的数组
      // 防止重复提交
      loading: false,
      previewFileStyle: {},
      getStyle: {
        width: "200px",
        height: "68px",
        overflow: "hidden",
        border: "1px solid #e8e8e8",
      },
      previews: {},
    };
  },
  methods: {
    // 限制图片大小
    changeImage(file) {
      this.loading = false;
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传文件大小不能超过 3MB!");
        return false;
      }

      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = file.url;
        this.dialogVisible = true;
      });
    },
    // 点击裁剪，这一步是可以拿到处理后的地址
    finish() {
      // const file = this.$refs.cropper.getCroppedCanvas().toDataURL()
      // console.log('fileCropper11', file)
      this.$refs.cropper.getCropBlob((data) => {
        this.loading = true;
        this.option.img = "";
        this.dialogVisible = false;
        this.blobToDataURI(data, (res) => {
          this.loading = false;
          this.$emit("cropperImg", res);
        });
      });
    },
    // blob 装 base64
    blobToDataURI(blob, callback) {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = function (e) {
        callback(e.target.result);
      };
    },

    // 放大图片
    handleBigImage() {
      this.$refs.cropper.changeScale(1);
    },

    // 缩小图片
    handleSmallImage() {
      this.$refs.cropper.changeScale(-1);
    },

    // 旋转图片
    handleRotateImage() {
      this.$refs.cropper.rotateRight();
    },
    // 处理裁剪图片的预览
    previewHandle(data) {
      this.previews = data; // 预览img图片
      const tempScale = 200 / data.w;
      this.previewFileStyle = {
        width: data.w + "px",
        height: data.h + "px",
        margin: 0,
        overflow: "hidden",
        zoom: tempScale,
        position: "relative",
        border: "1px solid #e8e8e8",
      };
    },
    // 回显图片使用的方法
    onChange(e) {
      const file = e.target.files[0];
      const URL = window.URL || window.webkitURL;
      // 上传图片前置钩子，用于判断限制类型用
      if (this.beforeUploadEvent(file)) {
        this.option.img = URL.createObjectURL(file);
        this.dialogVisible = true;
      }
    },

    beforeUploadEvent(file) {
      const type = file.name.substring(file.name.lastIndexOf(".") + 1); // 获得图片上传后缀
      // 判断是否符合上传类型
      const allowType = ["png", "jpg", "jpeg"];
      const isAllowTye = allowType.some((item) => {
        return item === type;
      });
      if (!isAllowTye) {
        this.$message.error(`仅支持${allowType.join("、")}格式的图片`);
        return false;
      }
      return true;
    },
    // 点击上传
    uploadFile(type) {
      /* 打开新的上传文件无需生成新的input元素 */
      if (type === "reupload") {
        this.$refs.reuploadInput.click();
        return;
      }
      let input = document.createElement("input");
      input.type = "file";
      input.accept = this.option.accept;
      input.onchange = this.onChange;
      input.click();
      input = null;
    },
  },
};
</script>
<style lang="scss">
// 截图
.cropper-content {
  .cropper {
    width: 100%;
    height: 50vh;
  }
}
.cropper_right {
  flex: 1;
  margin-left: 44px;
  .preview_text {
    margin-bottom: 12px;
  }
}
</style>