上传头像: 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
标签:vue,const,param,state,value,file,cropper,上传,cropperjs 来源: https://www.cnblogs.com/Nyan-Workflow-FC/p/16367421.html