elmentui[上传组件el-upload配合axios进行文件上传操作]
文件上传操作
方式一：直接使用elementui本身的上传组件进行
<template>
<!-- 官方的图片上传修改组件，目的是将上传的文件抛出去，根据适当的需要而进行适当的修改 -->
<div class="el-upload-box">
<div class="upload-box">
<el-upload
ref="myUpload"
multiple
list-type="picture-card"
:action="'http://10.01.01.01:8800/xx'"
:data="{ projectType: 1 }"
:limit="maxLength"
:file-list="pictureList"
:before-upload="beforeUpload"
:on-success="uploadSucess"
:on-error="uploadError"
:on-exceed="uploadExceed"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:class="{ 'upload-disabled': currentFileListLengthDisabled }"
>
<!--这个属性可以让按钮消失 -->
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<p class="el-upload__tip">
{
{
currentFileListLength }}/{
{
maxLength
}}张，只能上传jpg/jpeg/png文件，且不超过10M
</p>
</div>
<el-button type="primary" :loading="pictureLoading" @click="uploadPicture"
>上传按钮</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
// 图片上传
dialogVisible: false, // 图片放大dialog
dialogImageUrl: "", // 图片放大地址
currentFileListLength: 0, // 图片数量(用于判断所有图片是否都已成功上传)
maxLength: 9, // 最大上传几张
pictureLoading: false, // 图片上传时候loading状态
// 图片列表
pictureList: [
{
name: "food.jpeg",
url:
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
}
]
};
},
computed: {
// 上传张数大于限制张数的时候将上传框隐藏
currentFileListLengthDisabled() {
if (this.currentFileListLength >= this.maxLength) {
return true;
} else {
return false;
}
}
},
created() {
console.log(this.$store.state.fileUploadUrl);
// 进入之前就需要图片的长度（在给pictureList赋值之后就需要进行长度判断）
this.currentFileListLength = this.pictureList.length;
},
methods: {
// 上传之前
beforeUpload(file) {
this.pictureLoading = true; // 按钮加载状态打开
this.currentFileListLength = this.pictureList.length; // 当前图片长度
// 格式、大小限制
const isJPG =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg";
const isLt = file.size / 1024 / 1024 < 10; // 大小控制 10 为 10M
if (!isJPG) {
this.$message.error("只能上传 JPG / PNG / JPEG 格式图片!");
}
if (!isLt) {
this.$message.error("上传图片大小不能超过 10MB!");
}
return isJPG && isLt;
},
// 上传成功
uploadSucess(response, file, fileList) {
this.pictureList = fileList;
if (response) {
// 上传成功一次就增加一张，直到上传完毕
++this.currentFileListLength;
if (this.currentFileListLength === fileList.length) {
this.pictureLoading = false;
}
}
},
// 上传失败
uploadError(err) {
if (err) {
this.pictureLoading = false;
this.$message.error("图片上传失败！");
}
},
// 图片超过限制limit=""
uploadExceed() {
this.$message.warning("一次最多只可上传" + this.maxLength + "张图片");
},
// 点击图片删除图标
handleRemove(file) {
this.pictureLoading = false;
// 注意：这里删除的字段需要根据实际情况来决定
this.pictureList = this.pictureList.filter(item => item.url !== file.url); // 删除时候过滤掉被删除的内容
this.currentFileListLength = this.pictureList.length;
},
// 点击图片放大图标
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 上传按钮
uploadPicture() {
console.log("图片列表", this.pictureList);
}
}
};
</script>
<style lang="scss">
.el-upload-box {
.upload-box {
.upload-disabled {
display: none !important;
}
}
}
</style>
方式二：直接使用elementui本身的自定义上传功能封装一个组件
<template>
<!--
自定义文件上传组件
将本组件包裹住需要点击触发上传的内容
设置好handleSuccess事件即可获得数据内容
-->
<div class="upload-component" :style="{ height: inHeight, width: inWidth }">
<!--上传形式为图片jps,png,jpeg-->
<div v-if="uploadType === 'picture'" class="picture-box">
<el-upload
class="picture"
action="/"
:show-file-list="false"
accept="image/png,image/jpeg,image/jpg"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
:http-request="uploadLicencePicNo"
>
<slot></slot>
</el-upload>
</div>
<!--上传形式为文件pdf,doc,docx-->
<div v-else-if="uploadType === 'file'" class="file-box">
<el-upload
class="file"
action="/"
:show-file-list="false"
:before-upload="beforeAvatarUploadFile"
accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
:on-success="handleAvatarSuccess"
:http-request="uploadLicencePicNo"
>
<slot></slot>
</el-upload>
</div>
<!--上传为任何形式-->
<div v-else>
<el-upload
class="file"
action="/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:http-request="uploadLicencePicNo"
>
<slot></slot>
</el-upload>
</div>
</div>
</template>
<script>
export default {
name: "custom-upload",
props: {
type: {
// 用于标记当前组件的类型名称，在上传成功后抛出用于区分多次引用的情况，如idcardHeadNo、idcardNationalNo、lawyerFileNo
type: String,
default: ""
},
inHeight: {
// 控制组件高度
type: String,
default: "auto"
},
inWidth: {
// 控制组件宽度
type: String,
default: "auto"
},
fileCate: {
// 文件分类[profile资料信息;evidence证据文件;cases案件文件]
type: String,
default: ""
},
uploadType: {
// 上传类型，如果是文件则是file,如果是图片则是picture
type: String,
default: "picture"
}
},
data() {
return {
// 格式验证
contractAccept:
"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
};
},
methods: {
// 图片上传前格式与大小验证
beforeAvatarUpload(file) {
let isPass = false;
if (
file.type === "image/png" ||
file.type === "image/jpeg" ||
file.type === "image/jpg"
) {
isPass = true;
}
const isLt = file.size / 1024 / 1024 < 10;
if (!isPass) {
this.$message.error("当前仅支持上传图片JPG/jpeg/png格式!");
return false;
}
if (!isLt) {
this.$message.error("上传图片大小不能超过 5MB!");
return false;
}
return isPass && isLt;
},
// 文件上传前格式验证
beforeAvatarUploadFile(file) {
let isPass = false;
if (this.contractAccept.indexOf(file.type) !== -1) {
isPass = true;
}
if (!isPass) {
this.$message.error("当前仅支持上传文件pdf/doc/docx!");
return false;
}
return isPass;
},
// 文件-图片-上传成功返回内容
handleAvatarSuccess(res) {
if (res) {
let arr = {
type: this.type,
data: res.data
};
// 抛出的数据内容
this.$emit("handleSuccess", arr);
this.$message.success("上传成功！");
}
},
// 文件-图片-上传操作
uploadLicencePicNo(e) {
e.file.fileCate = this.fileCate;
// 调用上传接口将文件传递给后台
uploadFile(e).then(() => {
});
}
}
};
</script>
<style lang="scss">
.upload-component {
display: inline;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>