https://github.com/acccccccb/vue-img-cutter
1.安装
npm install vue-img-cutter --save-dev
2. 引入注册
import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}
3.引用
<ImgCutter
@cutDown="cutDown"
:boxWidth="500"
:boxHeight="250"
:cutWidth="405"
:cutHeight="174"
:tool="false"
:sizeChange="true"
class="inline-block"
>
<el-button
slot="open"
type="text"
size="small"
icon="el-icon-plus"
class="height-50 size-14 addImg"
>{{ !info.image ? "添加封面" : "更改封面 " }}</el-button
>
<el-button slot="choose" type="primary" size="small"
>选择图片</el-button
>
<el-button slot="confirm" type="primary" size="small"
>确认</el-button
>
<el-button slot="cancel" type="primary" plain size="small"
>取消</el-button
></ImgCutter>
//裁剪后上传方法
async cutDown(param) {
const res = await uploadImage(param);
if (res) {
this.$set(this.info, "image", res.data);
let file = { raw: param.file };
let imageUrl = await prewImage(file);
this.$set(this.info, "image_file", imageUrl);
}
},