|
安装vue-cropper
npm install vue-cropper
在main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
需求：
用户上传图片后，需要裁剪，并保留，上传到服务器
思路：
点击上传，从本地选择图片文件 选择文件后弹出模态框（将选择的图片传递过去） 模态框作为裁剪图片的容器 进行裁剪 获取裁剪后的结果 并将裁剪后的图片上传到服务器，返回图片地址给父组件 父组件获取到裁剪后的图片地址后将图片回显
图片上传框组件
import CropperModal from './CropperModal'
export default {
components: {
CropperModal
},
props: {
//图片格式
imgFormat: {
type: Array,
default: function() {
return ['image/jpeg']
}
},
//图片大小
imgSize: {
type: Number,
default: 2
},
//图片裁切配置
options: {
type: Object,
default: function() {
return {
autoCropWidth: 180,
autoCropHeight: 180
}
}
},
//回显图片路径
value: {
type: String,
default: ''
}
},
data() {
return
|