## 需求：

- 上傳的圖片限制長寬相同；

- 只能上傳圖片；

- 圖片大小限制 500k

- 當前專案僅需要上傳的圖片資訊

## 專案元件使用

### 裁剪：vue-cropper

```js
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
```

### 上傳： Upload 上傳(element plus 元件)

## 實現理論：

1. 透過元件 Upload 進行圖片上傳前校驗方法判斷是否需要裁剪、是否是圖片、是否超過大小限制；
2. 裁剪後的圖片限制大小；
3. 上傳的圖片資訊暴漏出元件；

## 元件呼叫

img-url 預設預覽的圖片
@img-upload 上傳所需的最終圖片

## 程式碼實現

### 頁面

裁剪時彈窗顯示

```html

  <el-upload class="uploader_cutsom" action="http://blog.itpub.net/70013909/viewspace-2927150/" :show-file-list="false" :accept="imgUpload.imgBmp" :http-request="updataImg" :before-upload="beforUpload">
    <div v-if="imgUpload.imageUrl" class="w-full h-full relative">
      <img class="w-full h-full" :src="imgUpload.imageUrl" alt="web技術分享| 圖片上傳與圖片裁剪結合 vue3" width="640" height="360">
      
      <div class="absolute top-0 right-0 w-8 h-8 rounded flex items-center justify-center bg-black bg-opacity-30 text-white text-base z-20 cursor-pointer">
        <i class="iconfont icon-shanchu"></i>
      </div>
    </div>

<div v-else="" class="uploader_cutsom_default">
      <p>從你的計算機中</p>
      <p class="uploader_cutsom_default_button">選擇檔案</p>
    </div>
  </el-upload>
  
  <el-dialog v-model="imgUpload.dialogCropping" custom-class="dialog_custom" title="裁剪圖片" append-to-body="" :close-on-press-escape="false" :show-close="false" :close-on-click-modal="false">
    <div>
      <div class="h-96 w-full">
        <vuecropper ref="cropper" class="vue_cropper_custom" :img="imgCropping.imageUrl" :outputtype="imgCropping.outputType" :autocrop="imgCropping.autoCrop" :autocropwidth="imgCropping.autoCropWidth" :autocropheight="imgCropping.autoCropHeight" :fixed="imgCropping.fixed" :fixednumber="imgCropping.fixedNumber" :centerbox="imgCropping.centerBox" :full="imgCropping.full"></vuecropper>
      </div>
    </div>
    <template>
      <el-button v-focus="" false="">
        取消
      </el-button>
      <el-button v-focus="" type="primary" true="">
        確定
      </el-button>
    </template>
  </el-dialog>
```

### 邏輯

```ts
/** 圖片地址傳遞 */
const prop = defineProps({
  imgUrl: {
    type: String,
    default: "",
  },
});
/** 事件通知 */
const emit = defineEmits(["img-upload"]);

/** 圖片上傳 */
const imgUpload = reactive({
  // 是否展示裁剪
  dialogCropping: false,
  isCropping: false, // 判斷是否已經截圖
  // 圖片
  imageUrl: "",
  // 圖片格式
  imgBmp: "image/*",
  // 圖片名稱
  imgName: "",
});
// 圖片上傳前校驗
const beforUpload: UploadProps["beforeUpload"] = async (rawFile) => {
  // 判斷是否需要進行裁剪
  imgUpload.isCropping = (await imgSize(rawFile)) as boolean;
  // 圖片名稱
  imgUpload.imgName = rawFile.name;
  if (imgUpload.isCropping) {
    if (rawFile.type.indexOf("image/") === -1) {
      ElMessage.error("請上傳正確的圖片格式");
      return false;
    } else if (rawFile.size / 1024 / 1024 > 0.5) {
      ElMessage.error("圖片大小不能超過 500k");
      return false;
    }
  } else {
    // 進入裁剪
    imgCropping.imageUrl = URL.createObjectURL(rawFile);
    imgUpload.dialogCropping = true;
    return false;
  }
};
// 上傳
const updataImg = async (data: any) => {
  // 如果未截圖,開啟裁剪
  if (imgUpload.isCropping) {
    // 圖片預覽
    imgUpload.imageUrl = URL.createObjectURL(data.file);
    imgUpload.dialogCropping = false;
    imgUpload.isCropping = false;
    // 圖片資訊
    emit("img-upload", data.file);
  }
};

/** 圖片裁剪 */
const imgCropping = reactive({
  imageUrl: "",
  // 裁剪生成圖片的格式
  outputType: "png",
  // 是否預設生成截圖框
  autoCrop: true,
  // 上傳圖片按照原始比例渲染
  //   original: true,
  // 是否輸出原圖比例的截圖
  full: false,
  // 預設生成截圖框寬度
  autoCropWidth: 160,
  // 預設生成截圖框高度
  autoCropHeight: 160,
  // 是否開啟截圖框寬高固定比例
  fixed: true,
  // 截圖框的寬高比例
  fixedNumber: [1, 1],
  // 截圖框是否被限制在圖片裡面
  centerBox: true,
});

// 生成裁剪圖片
const handleCropping = (roleRefs: any, type: boolean) => {
  if (type) {
    roleRefs.getCropBlob((data: any) => {
      // 判斷裁剪圖片大小
      if (data.size / 1024 / 1024 > 0.5) {
        ElMessage.error("裁剪圖片大小不能超過 500k");
      } else {
        // 圖片預覽
        imgUpload.imageUrl = URL.createObjectURL(data);
        imgUpload.dialogCropping = false; 
        // 圖片資訊
        emit("img-upload", blobToFile(data, imgUpload.imgName));
      }
    });
  } else {
    imgUpload.imageUrl = "";
    imgUpload.dialogCropping = false;
  }
};

// 清除圖片
const clearImg = () => {
  imgUpload.imageUrl = "";
  emit("img-upload");
};

onMounted(() => {
  // 圖片地址傳遞
  imgUpload.imageUrl = prop.imgUrl;
});
```

### 圖片相關方法封裝

```ts
/** 查詢圖片大小 */
export const imgSize = (file: any) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      // 讓頁面中的img標籤的src指向讀取的路徑
      let img = new Image();
      img.src = reader.result as string;
      if (img.complete) {
        // 如果存在瀏覽器快取中
        if (img.width / img.height !== 1) {
          resolve(false);
        } else {
          resolve(true);
        }
      } else {
        img.onload = () => {
          if (img.width / img.height !== 1) {
            resolve(false);
          } else {
            resolve(true);
          }
        };
      }
    };
  });
};

/**
 * 檔案格式轉換
 * @description blobToFile
 * @param {Blob} blob
 * @param {String} fileName
 */
export const blobToFile = (blob: any, fileName: string) => {
  return new window.File([blob], fileName, {
    type: blob.type,
  });
};
```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/17196090cbf840b3bd0d49f5826bf3ac.jpeg#pic_center)

web技術分享| 圖片上傳與圖片裁剪結合 vue3

相關文章