基于 element-ui 的简单且强大的图片上传组件

介绍

效果图

在线示例

安装

npm install vue-ele-upload-image --save

使用

// 全局引入
import EleUploadImage from "vue-ele-upload-image";
Vue.component(EleUploadImage.name, EleUploadImage);

// 局部引入
import EleUploadImage from "vue-ele-upload-image";
export default {
 components: {
 EleUploadImage
 }
};

示例

<!-- 默认(单张, 点击上传) -->
<template>
 <ele-upload-image
 action="https://jsonplaceholder.typicode.com/posts/"
 v-model="image"
 :responseFn="handleResponse"
 ></ele-upload-image>
</template>
<script>
 export default {
 data() {
 return {
 image: ""
 };
 },
 methods: {
 handleResponse(response, file, fileList) {
 // 根据响应结果, 设置 URL
 return "https://xxx.xxx.com/image/" + response.id;
 }
 }
 };
</script>

<template>
 <!-- 多张(multiple) -->
 <ele-upload-image
 multiple
 :responseFn="handleResponse"
 action="https://jsonplaceholder.typicode.com/posts/"
 v-model="images"
 ></ele-upload-image>
</template>
<script>
 export default {
 data() {
 return {
 images: ""
 };
 },
 methods: {
 handleResponse(response, file, fileList) {
 // 根据响应结果, 设置 URL
 return "https://xxx.xxx.com/image/" + response.id;
 }
 }
 };
</script>

<!-- 拖拽上传(drag) -->
<ele-upload-image
 drag
 :responseFn="handleResponse"
 action="https://jsonplaceholder.typicode.com/posts/"
 v-model="image"
></ele-upload-image>

<!-- 拖拽上传(crop) -->
<ele-upload-image
 crop
 :responseFn="handleResponse"
 action="https://jsonplaceholder.typicode.com/posts/"
 v-model="image"
></ele-upload-image>

Props 参数

props: {
 // 值
 value: {
 type: [String, Array, Object]
 },
 // 响应处理函数
 responseFn: Function,
 // 是否剪裁
 crop: {
 type: Boolean,
 default: false
 },
 // 裁剪高度
 cropHeight: {
 type: Number
 },
 // 裁剪宽度
 cropWidth: {
 type: Number
 },
 // 图片显示大小
 size: {
 type: Number,
 default: 150
 },
 // 大小限制(MB)
 fileSize: {
 type: Number
 },
 // 是否显示提示
 isShowTip: {
 type: Boolean,
 default: true
 },
 // 弹窗标题
 title: String,
 // 图片懒加载
 lazy: {
 type: Boolean,
 default: false
 },
 // 文件类型, 例如['png', 'jpg', 'jpeg']
 fileType: {
 type: Array
 },
 // 缩略图后缀, 例如七牛云缩略图样式 (?imageView2/1/w/20/h/20)
 // 如果存在, 则列表显示是加缩略图后缀的, 弹窗不带缩略图后缀
 thumbSuffix: {
 type: String,
 default: ''
 },
 // 是否显示上传成功的提示
 isShowSuccessTip: {
 type: Boolean,
 default: true
 },
 // 上传地址 (同官网)
 action: {
 type: String,
 required: true
 },
 // 设置上传的请求头部(同官网)
 headers: Object,
 // 文件个数显示(同官网)
 limit: Number,
 // 是否启用拖拽上传 (同官网)
 drag: {
 type: Boolean,
 default: false
 },
 // 删除前的操作(同官网)
 beforeRemove: Function
 // 	支持发送 cookie 凭证信息 (同官网)
 withCredentials: {
 type: Boolean,
 default: false
 },
 // 是否支持多选文件 (同官网)
 multiple: {
 type: Boolean,
 default: false
 },
 // 上传时附带的额外参数(同官网)
 data: Object,
 // 上传的文件字段名 (同官网)
 name: {
 type: String,
 default: 'file'
 },
 // 覆盖默认的上传行为,可以自定义上传的实现 (同官网)
 httpRequest: Function,
 // 接受上传的文件类型(thumbnail-mode 模式下此参数无效)(同官网)
 accept: String
}

事件