上传头像: vue-cropperjs简单使用

1、安装

npm install vue-cropperjs --save

2、引入

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

components: { VueCropper }

3、html

<div class="cropper">
　　<div class="cropper-wrapper">
      <section class="cropper-content" v-if="state.imgSrc">
        <vue-cropper
          ref="cropper"
          :aspect-ratio="16 / 16"
          :src="state.imgSrc"
          :min-container-width="350"
          :min-container-height="325"
          preview=".preview"
        />
      </section>
      <section class="cropper-content" v-else>
      </section>
      <section class="preview-area">
        <p>图片预览</p>
        <div class="preview-wrapper">
          <div class="preview" />
        </div>
      </section>
    </div>
　　<section class="footer-btn">
　　　　<div class="scope-btn">
        <label class="btn" for="uploads">选择图片</label>
        <input
          type="file"
          id="uploads"
          style="position: absolute; clip: rect(0 0 0 0)"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="setImage($event)"
        />
　　　　　<el-button type="primary" @click="zoom(0.2)"> + </el-button>
        <el-button type="primary" @click="zoom(-0.2)"> - </el-button>
        <el-button type="primary" @click="rotate(-90)">
          <span style="font-weight: 600">↺</span></el-button
        >
        <el-button type="primary" @click="rotate(90)">
          <span style="font-weight: 600">↻</span>
        </el-button>
      </div>
　　　　<div class="upload-btn">
        <el-button type="primary" @click="uploadAvator()"> 上传头像 </el-button>
      </div>
　　</section>
</div>

5、js

setup() {
　　let state = reactive({
      fileName: "doctor_avator.png",
      imgSrc: "",
    });
    let cropper = ref(null);
　　const setImage = (e) => {
      const file = e.target.files[0];
      state.fileName = file.name;
      if (file.type.indexOf("image/") === -1) {
        ElMessage.error("请选择图片类型文件");
        return;
      }
      if (typeof FileReader === "function") {
        const reader = new FileReader();
        reader.onload = (event) => {
          state.imgSrc = event.target.result;
          cropper.value.replace(event.target.result);
        };
        reader.readAsDataURL(file);
      } else {
        ElMessage.error("Sorry, FileReader API not supported");
      }
    };
　　const rotate = (deg) => {
      cropper.value.rotate(deg);
    };
    const zoom = (percent) => {
      cropper.value.relativeZoom(percent);
    };
    const uploadAvator = () => {
      cropper.value.getCroppedCanvas().toBlob((blobData) => {
        let param = new FormData();
        param.append("file", blobData, state.fileName);
        param.append("bucketName", INTERNET_BUCKET);
　　　　　　//上传图片到后台服务
        //uploadFile({
         //param,
          //callback(filePath) {
           // uploadDoctorAvator(filePath);
          //},
        //});
      });
    };
　　return {
　　　　state,
      cropper,
      setImage,
      rotate,
      zoom,
      uploadAvator,
　　}
}

6、css