0.0.1 • Published 3 years ago
image-picker-rui v0.0.1
image-picker-rui
基于
vue
、element-ui
和vue-cropper
封装的图片上传组件,支持v-model
##安装
npm install image-picker-rui -S
##使用
全局注册
// main.js
import ImagePicker from 'image-picker-rui'
Vue.use(ImagePicker)
本地注册
import ImagePicker from 'image-picker-rui'
export default = {
name: 'xxx',
components: { ImagePicker },
method: {
uploadImage(file) {...}
}
}
组件使用
<image-picker v-model="url" :uploadImage="uploadImage"></image-picker>
配置
参数 | 类型 | 默认值 | 备注 |
---|---|---|---|
isMulti | Boolean | false | 是否多张图片 |
isCut | Boolean | false | 是否裁剪图片 |
upLoadImage | Function | 自定义上传接口,返回Promise | |
maxSize | Number | 0 | 限制图片大小,默认不限制 |
tip | String | element-ui 上传组件tip | |
size | Array | [1280, 720] | 裁剪框的宽高,会锁定比例 |
图片上传接口示例
uploadImage(file) {
return new Promise((resolve, reject) => {
const params = new FormData()
params.append('file', file)
// 接口
upload(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
0.0.1
3 years ago