标签：vue const param state value file cropper 上传 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

标签：vue,const,param,state,value,file,cropper,上传,cropperjs
来源： https://www.cnblogs.com/Nyan-Workflow-FC/p/16367421.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。