Appearance

devUploadImage 图片上传 ​

主要功能 ​

快速帮你完成图片上传功能，支持 图片格式限制 图片大小限制 图片拖拽排序 图片预览 图片下载 图片裁剪，满足多场景图像处理需求。

注意事项 ​

组支持监听上传进度，但是需要在axios接口定义上设置 onUploadProgress 方法。可直接从入参 other 中结构出来，大概如下：

typescript
export function uploadFile (data: Record<string, any>, other: Record<string, any> = {}) {
    return request({
        url: '上传接口地址',
        method: 'post',
        data,
        ...other
    });
}

上面代码示例中的 request 方法是一个封装好的请求方法，实际使用时需要根据自己的项目进行修改。

特别提示

下面所有示例代码中没有真正的上传图片至服务器，主要是为了演示组件的使用方法，所以无法正确获取到上传进度，实际项目中没有问题。

图片格式限时 ​

默认情况下不限制图片格式，支持所有图片格式。可以通过 image-types 属性来限制上传的图片格式。

图片大小限制 ​

默认情况下不限制图片大小，可以通过 max-size 属性来限制上传的图片大小，单位为字节（MB）。

图片拖拽排序 ​

通过 max-count 属性来限制上传的图片数量，默认为 1 。可以通过 sortable 属性来开启拖拽排序功能。

当 max-count 属性值大于 1 时，v-model 所绑定的值为数组。

图片裁剪 ​

通过 cropping 属性来开启图片裁剪功能。裁剪功能底层依赖 devImageCropper 组件。 更多的配置项可以通过 cropper-dev-image-cropper-attrs 属性传入。

API ​

属性 ​

DevUploadImage Props

—
暂无数据

事件 ​

DevUploadImage Events

Function
暂无数据