Skip to content

photoswipe+vue-cropper+vuedraggable实现的图片上传

Notifications You must be signed in to change notification settings

xiangergou/PC-imgUpload

Repository files navigation

imgupload

基于vue+element+sass实现的图片上传、裁剪、预览、下载等集多功能于一体的图片操作组件,常用于后端管理项目图片上传中。

本组件将上传的图片file转为base64,以期能在页面直接展示, 待裁剪等操作之后返回转换后的图片地址。

基于photoswipe、vue-cropper、vuedraggable, 站在前人肩膀整合而成。

image

<imgUpload
    :limitSize=1 // 图片限制大小 默认1M
    :isMultiple="true" // 是否开启多张上传, 默认多张
    :canDelete="true"  // 是否开启删除功能,默认开启
    :hasUploadImgList="imgList"  // 已上传的图片回显,将接口返回的图片地址以对象数组的格式传入。 {src: 'address', title: 'img.png'}
    @outputImg="getOutputImgList" // 上传后转成的base64位地址,可转为file
    @deleteImg="getDeleteImg" // 视图层面删除返回的图片
    :imgWidth='{width: 122, height: 122}' // 设置图片默认大小
  />

About

photoswipe+vue-cropper+vuedraggable实现的图片上传

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published