Ant Design Vue结合vue-cropper打造图片裁剪上传组件,handlermapping作用

yeamy

关注

阅读 65

2022-01-31

},

},

}

  • 模态框 CropperModal.vue

<a-modal

:visible=“visible”

:title=“options.title”

:maskClosable=“false”

:confirmLoading=“confirmLoading”

:width=“800”

@cancel=“cancelHandel”

<a-button key=“back” @click=“cancelHandel”>取消

<a-button key=“submit” type=“primary” :loading=“confirmLoading” @click=“okHandel”>保存

  • ajax网络接口 index.js

import request from ‘@/utils/request’

import qs from ‘qs’

const Api = {

UpPic: ‘/UpPic’,

}

/**

  • 上传图片

  • @param parameter

  • @returns {*}

*/

export function UpPic(parameter) {

return request({

url: Api.UpPic,

method: ‘post’,

data: qs.stringify(parameter)

})

}

  • 使用组件

<image-cropper

:options=“cropperOptions”

:imgSize=“2”

:imgType=“imgType”

:imageUrl=“imgUrl”

@crop-upload-close=“cropClose”

@crop-upload-success=“cropSuccess”

/>

精彩评论(0)

0 0 举报