vue element-ui upload 图片文件上传封装简化
element upload提供的功能很强大，但在使用的时候，有太多参数，和事件回调需要处理，不便于重复使用，每次都还弄晕了，为了便于使用，我将Upload针对于图片上传的功能，进行了一个封装处理，所有的回调都在插件里面进行处理了，使用只需要加一个标签就可以了，支持多文件上传，删除，预览，回显，文件大小限制，文件类型限制，自定义上传方法等各种参数，有需要的朋友可以看看，如果有更好的方法和意见，欢迎留言讨论。
项目GitHub地址：https://github.com/dingh123/dh-plugin/tree/master/UploadImage
UploadImage
基于ElementUI二次封装的图片上传组件，支持多文件上传，直接使用v-model取值回显
使用方式
在 script 中引用组件
import UploadImage from '@/components/UploadImage/index.vue';
export default {
components: {
UploadImage}
}
在 template 中使用组件
<upload-image ref="uploadImage" v-model="formData.image" :limit="6" :multiple="true" description="建议上传600x600的图片，只能上传jpg/png/gif文件" />
如果动态设置回显，需要手动触发一下watchValue方法
this.formData.image = res.image;
this.$nextTick(() => {
this.$refs.uploadImage.watchValue();
});
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| multiple | Boolean | false | 是否支持多选 |
| data | Object | - | 上传时附带的额外参数 |
| showFileList | Boolean | true | 是否显示已上传文件列表 |
| limit | Number | - | 最大允许上传个数 |
| name | String | file | 设定文件域的字段名 |
| accept | String | image/jpeg, image/png, image/gif | 接受上传的文件类型 |
| description | String | - | 文件上传描述 |
| size | Number | 5 * 1024 | 文件大小限制，单位KB，默认5MB |
| httpRequest | Function | - | 自定义上传方法 |
组件里面设置上传的方法
1、【默认上传】这个方法是设置组件默认上传的方法，避免每次使用时候都需要写一个上传方法；
uploadImgRequest(f) {
let param = new FormData(); //创建form对象
param.append('file', f.file); //通过append向form对象添加数据
uploadImg(param)
.then(res => {
f.onSuccess(res);
})
.catch(() => {
f.onError();
});
},
2、【自定义上传】支持默认上传的同时也支持自定义上传方法，httpRequest
<template>
<upload-image
class="icon-image"
ref="uploadFavicon"
v-model="favicon"
:limit="1"
accept="image/x-icon"
:http-request="uploadRequestIcon"
/>
template>
<script>
import UploadImage from '@/components/UploadImage/index.vue';
import {
uploadIcon } from '@/api';
export default {
components: {
UploadImage },
methods: {
/**
* 自定义上传方法，icon
*/
uploadRequestIcon(f) {
let param = new FormData(); //创建form对象
param.append('file', f.file); //通过append向form对象添加数据
uploadIcon(param)
.then(res => {
f.onSuccess(res);
})
.catch(() => {
f.onError();
});
},
},
};
script>
最后封装源码
UploadImage.vue
<template>
<div>
<el-upload
ref="elUpload"
action="#"
list-type="picture-card"
:data="data"
:multiple="multiple"
:limit="limit"
:fileList="fileList"
:show-file-list="showFileList"
:name="name"
:accept="accept"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-success="handleImageSuccess"
:on-remove="handleRemove"
:on-exceed="handleExceed"
class="upload-image"
:class="{ 'hide-upload': hideUpload }"
:http-request="httpRequestMain"
>
<div class="upload-tip">
<i class="el-icon-plus">i>
<div class="el-upload__tip" v-if="description">
{
{ description }}
div>
div>
el-upload>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="viewImageUrl" />
div>
template>
<script>
import {
uploadImg } from '@/api';
import emitter from 'element-ui/src/mixins/emitter';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
name: 'UploadImage',
mixins: [emitter],
components: {
ElImageViewer,
},
props: {
value: {
type: String,
default: '',
},
// 是否支持多选
multiple: {
type: Boolean,
default: false,
},
// 上传时附带的额外参数
data: {
type: Object,
},
// 是否显示已上传文件列表
showFileList: {
type: Boolean,
default: true,
},
// 最大允许上传个数
limit: {
type: Number,
},
// 设定文件域的字段名
name: {
type: String,
default: 'file',
},
// 接受上传的文件类型
accept: {
type: String,
default: 'image/jpeg, image/png, image/gif',
},
// 文件上传描述
description: {
type: String,
default: '',
// default: '请上传图片，只能上传jpg/png/gif文件',
},
validateEvent: {
type: Boolean,
default: true,
},
// 文件大小限制，单位KB，默认5MB
size: {
type: Number,
default: 5 * 1024,
},
// 自定义文件上传方法
httpRequest: {
type: Function,
},
},
data() {
return {
tempUrl: '',
hideUpload: false,
fileList: [],
showViewer: false,
viewImageUrl: [],
};
},
inject: {
elForm: {
default: '',
},
elFormItem: {
default: '',
},
},
created() {
this.watchValue();
},
watch: {
value(val) {
// this.watchValue();
// console.log(val);
},
},
methods: {
httpRequestMain(f) {
this.httpRequest ? this.httpRequest(f) : this.uploadImgRequest(f);
},
watchValue() {
let valueArray = this.value ? this.value.split(',') : [];
this.fileList = valueArray.map(item => {
return {
name: item,
url: item,
};
});
this.update();
},
uploadImgRequest(f) {
let param = new FormData(); //创建form对象
param.append('file', f.file); //通过append向form对象添加数据
uploadImg(param)
.then(res => {
f.onSuccess(res);
})
.catch(() => {
f.onError();
});
},
update() {
let valueArray = this.value ? this.value.split(',') : [];
if (valueArray.length >= this.limit) {
this.hideUpload = true;
} else {
this.hideUpload = false;
}
},
emitInput(value) {
this.$emit('input', value);
this.dispatch('ElFormItem', 'el.form.change', value);
this.$nextTick(() => {
this.update();
});
},
beforeUpload(file) {
const fileMax = file.size / 1024 < this.size;
if (!fileMax) {
this.$message.error(`上传图片大小不能超过 ${
this.renderSize(this.size / 1024)}!`);
}
return !!fileMax;
},
handlePictureCardPreview(file) {
this.viewImageUrl = [file.url];
this.showViewer = true;
},
closeViewer() {
this.showViewer = false;
},
handleRemove(file, fileList) {
const fileArray = fileList.map(item => {
return item.response.url;
});
this.emitInput(fileArray.join(','));
},
handleImageSuccess(res, file, fileList) {
file.url = res.url;
this.emitInput(this.value ? this.value + ',' + res.url : res.url);
},
handleExceed() {
this.$message.error(`最多上传${
this.limit}张图片`);
},
clearFiles() {
this.$refs.elUpload.clearFiles();
},
renderSize(value) {
if (null == value || value == '') {
return '0 Bytes';
}
let unitArr = new Array('Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
let index = 0;
let srcsize = parseFloat(value);
index = Math.floor(Math.log(srcsize) / Math.log(1024));
let size = srcsize / Math.pow(1024, index);
size = size.toFixed(2); //保留的小数位数
return size + unitArr[index];
},
},
};
script>
<style lang="scss" scoped>
/deep/ .el-upload-list--picture-card {
display: flex;
/deep/ .el-upload-list__item {
margin: 0;
}
}
.hide-upload /deep/ .el-upload--picture-card {
display: none;
}
.upload-tip {
height: 100%;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
}
.el-upload__tip {
line-height: 20px;
margin-top: 10px;
}
style>