Element-ui框架Upload上传组件开发整理
先看效果
页面引入部分
<vUpload
ref="uploadList"
:auto-upload="true"
:file-data="fileData"
:upload-nums="5"
list-type="picture-card"
@handleEvent="filelistEvent"
@handleRemove="fileListRemove"
/>
upload自定义组件
/**
* @description: 上传组件
* @param: {multiple | Boolean} 是否支持多选文件 默认true
* @param: {autoUpload | Boolean} 是否自动上传 默认false
* @param: {uploadType | String} 上传文件类型
* @param: {uploadNums | Number} 上传文件个数 默认-1 无限大
* @param: {listType | String} 列表类型 默认 picture
**/
<template>
<div class="one-img">
<i v-if="oneImg && imgUrl" class="el-icon-circle-close dele" @click="uploadRemoveOne" />
<el-upload
v-if="oneImg"
ref="upload"
:multiple="multiple"
:auto-upload="autoUpload"
:before-upload="uploadBefore"
:on-remove="uploadRemove"
:on-error="uploadError"
:http-request="upload"
action=""
>
<div>
<el-image
v-if="imgUrl"
:src="imgUrl"
style="width: 80px; height: 80px"
fit="cover"/>
<el-button
v-else
type="primary"
>
{{ actionName }}
el-button>
div>
el-upload>
<el-upload
v-else
ref="upload"
:multiple="multiple"
:auto-upload="autoUpload"
:before-upload="uploadBefore"
:on-remove="uploadRemove"
:on-error="uploadError"
:file-list="fileList"
:list-type="listType"
:limit="uploadNums"
:on-exceed="onExceed"
:http-request="upload"
:show-file-list="showfilelist"
action=""
>
<el-button
slot="trigger"
type="primary"
>
{{ actionName }}
el-button>
<el-button
v-if="!autoUpload"
style="margin-left: 10px;"
type="success"
@click="submitUpload"
>
开始上传
el-button>
<div
v-if="tipMassage"
slot="tip"
style="margin-top:-5px; padding: 10px 0; color:#ff4949"
>
{{ tipMassage }} <i
v-if="uploadMessage === '正在上传'"
class="el-icon-loading"
/>
div>
el-upload>
div>
template>
<script>
import { messageBox } from '@/js/mixin/confirmBox';
// import { sessionGet } from '@/js/storage';
// import { uploadFile, removeImage } from '@/api/goodsManage';
import { updateLoad, removeImage } from '@/api/shopOssApi';
export default {
name: 'vUpload',
props: {
// 回显已经上传的内容
fileData: {
type: Array,
default: () => {
return [];
}
},
// 单个回显已经上传的内容
imgUrl: {
type: String,
default: ''
},
oneImg: {
type: Boolean,
default: false
},
// 是否自动上传
autoUpload: {
type: Boolean,
default: false
},
// 上传的文件类型
uploadType: {
type: Array,
default: () => {
return ['jpeg', 'jpg', 'png'];
}
},
// 上传的文件个数
uploadNums: {
type: Number,
default: () => 5
},
// 上传的文件大小
fileSize: {
type: Number,
// 3M
default: () => 1024 * 1024 * 3
},
// 列表类型
listType: {
type: String,
default: () => {
// text/picture/picture-card
return 'text';
}
},
multiple: {
type: Boolean,
default: false
},
// 提示语,例如文件格式，数量，大小等
tipMassage: {
type: String,
default: () => ''
},
// 点击按钮
actionName: {
type: String,
default: () => '上传图片'
}
},
data() {
return {
// listType: 'text', // 文件列表的类型
checkType: true, // 检查文件类型
headersData: {}, // 上传的文件数据
fileList: [], // 上传成功的文件列表
uploadMessage: '', // 上传的说明
showfilelist: true
};
},
computed: {
accept: function() {
return this.uploadType.join(',');
}
},
watch: {
fileList() {
// 将内容派发到父组件
this.$emit('cdHandleUpload', { fileList: this.fileList });
},
uploadMessage() {
// 将内容派发到父组件
this.$emit('cdHandleUpload', { uploadMessage: this.uploadMessage });
}
},
created() {
this.init();
},
beforeDestroy() {
},
methods: {
// 组件初始化
init() {
// 设置token _getSessionStore('token')
/* this.headersData = {
'Content-Type': 'multipart/form-data',
token: sessionGet('token'),
Authorization: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjU1MDU1NjQ3MTg1MzUwNjU4Iiwicm9sZSI6IltcIlhXX1hBX1JPTEVcIl0iLCJpc3MiOiJrc3BsYXRmb3JtIiwiZXhwIjoxNTk1NDcxNjUxLCJpYXQiOjE1OTQyNjIwNTEsInRlbmFudCI6IjEwMDAwIiwib3JnSWQiOiIxMjA2NTA4Njg1ODkyNDYwMDIiLCJ1c2VybmFtZSI6Inhhc3d6eCJ9._FmngA8Nj58mxvS8lop5K-RTIYnQuh5Fy1lhioivReU',
jwttoken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoie1wibG9naW5OYW1lXCI6XCJseGRcIixcIm1vYmlsZVwiOlwiMTMxMTExMTExMTFcIixcIm9yZ0NvZGVcIjpcIjMwXCIsXCJvcmdJZFwiOlwiZmY4MDgwODE3MzYwY2E3MjAxNzM2Yjg3ZTk3MTAxZGVcIixcIm9yZ05hbWVcIjpcIuays-WMl-ecgeeUteWKm-WFrOWPuFwiLFwicm9sZVwiOlt7XCJvcmdSb2xlQ29kZVwiOlwiY3p5XCIsXCJvcmdSb2xlSWRcIjpcImZmODA4MDgxNzM2MGNhNzIwMTczNzEzOTU3YWEwM2ZlXCIsXCJvcmdSb2xlTmFtZVwiOlwi5rKz5YyX55yB55S15Yqb5YWs5Y-4X-aTjeS9nOWToVwiLFwicm9sZUlkXCI6XCJmZjgwODA4MTczNjBjYTcyMDE3MzcxMzgyZTcxMDNmZFwifSx7XCJvcmdSb2xlQ29kZVwiOlwic2p6aG55emdseVwiLFwib3JnUm9sZUlkXCI6XCJmZjgwODA4MTczNjBjYTcyMDE3MzZiOTUwN2M5MDFlOFwiLFwib3JnUm9sZU5hbWVcIjpcIuays-WMl-ecgeeUteWKm-WFrOWPuF_nnIHnuqfnu7zlkIjog73mupBf5oC7566h55CG5ZGYXCIsXCJyb2xlSWRcIjpcImZmODA4MDgxNzM2MGNhNzIwMTczNmI4ZWZiNDMwMWUxXCJ9XSxcInVzZXJJZFwiOlwiZmY4MDgwODE3MzVhN2E2NDAxNzM1Y2E1NDU0MjAwNzlcIixcInVzZXJOYW1lXCI6XCLliJjmmZPkuJxcIn0iLCJzdWIiOiLliJjmmZPkuJwiLCJpc3MiOiIwOThmNmJjZDQ2MjFkMzczY2FkZTRlODMyNjI3YjRmNj0iLCJpYXQiOjE1OTc3MzUzMDksImF1ZCI6InJlc3RhcGl1c2VyPSIsImV4cCI6MTkxOTk1MjAwMCwibmJmIjoxNTk3NzM1MzA5fQ.fO84WQJUKNCLjMVI5s2DQ-iYObv7xxbKljSfUJZxQpw'
}; */
// 显示已上传的文件
if (this.fileData) {
this.fileList = JSON.parse(JSON.stringify(this.fileData));
}
},
setFileList() {
if (this.fileData) {
this.fileList = JSON.parse(JSON.stringify(this.fileData));
}
},
// 手动触发上传
submitUpload() {
this.$refs.upload.submit();
},
// 文件超出个数限制时的钩子
onExceed(files, fileList) {
this.uploadMessage = `最多能上传${this.uploadNums}个图片`;
messageBox({ message: this.uploadMessage,
type: 'warning' });
this.$emit('onExceed', files, fileList);
},
// 文件上传之前
uploadBefore(file) {
const fileType = file.name.split('.'); const len = fileType.length - 1;
// 判断上传文件的后缀名, 将后缀名都转换成小写做比较
if (!this.uploadType.map(item => item.toLowerCase()).indexOf(fileType[len].toLowerCase()) < 0) {
// 取消上传请求
this.$refs.upload.abort(file);
this.uploadMessage = `${file.name}类型错误`;
messageBox({ message: this.uploadMessage,
type: 'error' });
this.$emit('typeErr', this.uploadMessage, file);
this.checkType = false;
return false;
}
if (file.size > this.fileSize) {
this.$refs.upload.abort(file);
this.uploadMessage = `${file.name}文件过大`;
messageBox({ message: this.uploadMessage,
type: 'error' });
this.$emit('sizeErr', this.uploadMessage, file);
this.checkType = false;
return false;
}
this.uploadMessage = '正在上传';
},
// 文件上传中
uploadProgress(event, file, fileList) {
// 如果类型检查失败不往下执行
if (!this.checkType) {
// 取消上传
this.$refs.upload.abort(file);
// 删除当前文件
fileList.forEach((item, index) => {
if (JSON.stringify(item) === JSON.stringify(file)) {
fileList.splice(index, 1);
}
});
}
},
// 文件上传成功
uploadSuccess(res, file) {
// 上传结果处理
if (res.success) {
this.uploadMessage = `${file.name}上传成功`;
// 清空已经上传列表
messageBox({ message: this.uploadMessage,
type: 'success' });
this.$refs.upload.clearFiles;
} else {
this.uploadMessage = `${file.name}上传失败`;
messageBox({ message: this.uploadMessage,
type: 'error' });
}
// 上传结果回返父组件
this.$emit('handleEvent', res);
},
// 文件上传失败
uploadError(error, file) {
this.uploadMessage = `${file.name}上传失败`;
messageBox({ message: this.uploadMessage,
type: 'error' });
// 上传结果回返父组件
this.$emit('handleErrorEvent', error);
},
upload(file) {console.log('uploadFile',file);
const formData = new FormData();
formData.append('file', file.file);
return updateLoad(formData).then(res => {
console.log('图片上传', res);
if (res.data.code === 200) {
/* if (res.data) { */
this.uploadMessage = `${file.file.name}上传成功`;
// 清空已经上传列表
messageBox({ message: this.uploadMessage,
type: 'success' });
var data = {
url: res.data.data.path,
// url: res.data,
name: res.data.data.fileName,
// name: file.file.name,
uid: file.file.uid
};
// this.$emit('handleEvent', res.data.data);
this.$emit('handleEvent', data);
} else {
this.uploadErro(file.file);
}
});
},
uploadErro(file) {
this.uploadMessage = `${file.name}上传失败`;
messageBox({ message: this.uploadMessage,
type: 'error' });
this.$emit('handleRemove', file);
},
// 文件移除时
uploadRemove(file, fileList) {console.log('file',file);
// 文件删除
this.$emit('handleRemove', file);console.log('111');
},
uploadRemoveOne() {
this.$emit('handleRemove', this.imgUrl);
}
}
};
</script>
官网地址：https://element.eleme.cn/#/zh-CN/component/upload