getCropData() { this.$refs.cropper.getCropData(data => { console.log(data) }) } } } 2、API说明 2.1、属性 2.2、事件 2.3、方法 3、完整代码展示 <template><el-buttonclass="primary"@click="dialogVisible = true">图片截取</el-button><el-dialogtitle="截取文件":visible.sync="dialogVisible...
Vue Cropper 是一款实用的 JavaScript 图片裁剪插件,基于 Vue.js 实现了在 web 上对图片的放大缩小、旋转、拖选区域裁剪、图片压缩上传等功能,API 也很简单,使用很方便。 Vue Cropper 插件的技术特性 基于Vue 开发,支持最新的 Vue 3.x,兼容 Vue 2.x 支持Vite 和TypeScript 无论是输入和输出图片,图片数据类型...
import { _api_stsTokenUpdata } from "@/api/oss/oss.js"; import { VueCropper } from 'vue-cropper' export default { components: { VueCropper }, props: { ruleCoverUrl: String, label: String, }, data() { return { // loading loading: false, // 弹出框 dialogImg: false, // 弹出...
this.$emit('getImgPath', this.imgPath) //拿到图片传递给父组件 api.hideProgress(); //隐藏上传进度条 api.toast({ msg: '上传成功', duration: 1000, location: 'bottom' }) this.spreadPic = this.domain + this.imgPath this.isShow = false this.cancelHandle() this.$emit('getImgPath', th...
import * as Config from "../../api/conf"; import vuecropper from "vue-cropper"; @Component({ props: {}, components: { filterdrug, vuecropper // prescriptioninfo } }) export default class Corpperlabel extends Vue { @Prop({ required: false }) ...
常用api属性描述: img: '', //裁剪图片的地址 outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1) outputType: 'jpeg', //裁剪生成图片的格式(jpeg || png || webp) info: true, //图片大小信息 canScale: true, //图片是否允许滚轮缩放 ...
Vue Cropper 插件的适用场景广泛，尤其是在用户上传头像的需求中。当用户选择用作头像的图片尺寸和占用空间较大时，使用 Vue Cropper 进行图片处理，既能满足用户编辑头像的需求，又能有效地减少对后端资源的消耗，实现更好的用户体验。在开发过程中，Vue Cropper 插件提供了简易的 API 和直观的操作界面，...
那么请用11111111里面的代码,尤其是formData这样的上传格式,否则上传失败 //1111111111111111111111111111111111111111111111111111111111111111111111111 // let formData = new FormData(); // formData.append('file',data,"DX.jpg") // let {data: res} = await _this.$http.post('/api/file/imgUpload', formData) ...
uploadOssApi(file) this.loading = false }, // 设置裁剪的配置 setVueCropperOptions () { this.$refs.VueCropperItem.options.autoCropWidth = this.autoCropWidth; this.$refs.VueCropperItem.options.autoCropHeight = this.autoCropHeight; this.$refs.VueCropperItem.options.fixedBox = this.fixedBox; ...
import{ uploadImage } from'@/api/common'import{ VueCropper } from"vue-cropper"; export default { name:'ImageUpload', components: { VueCropper },data() {return{ loading:false, imageCut: { isShowModal:false, imgFile:'',init: imgFile => {this.imageCut.imgFile = imgFilethis.imageCut.i...