注意：每次
上传
图片，都需要为
上传
的
UI
组件
手动指定headers请求头，同时在请求头对象中绑定authorization字段，因为
上传
组件
并没有调用axios，所以我们需要手动指定headers去获取token
add.vue >
<!-- -->
<template>
<!-- 面包屑导航区域 -->
<!-- 卡片视图区域 -->
<el-card>
:on-progress="onProgress"
<el-button type="primary" :disabled="
upload
ing">{{ buttonText }}</el-button>
<div slot="tip" class="el-
upload
__tip">{{ tip }}</div>
</el-
upload
>
</template>
<script>
export default {
name: "My
Upload
",
props: {
upload
Url: {
type: String,
default: ""
headers: {
type: Object,
default: () => ({})
formData: {
type: Object,
default: () => ({})
multiple: {
type: Boolean,
default: false
showFileList: {
type: Boolean,
default: true
limit: {
type: Number,
default: 0
buttonText: {
type: String,
default: "
上传
文件"
tip: {
type: String,
default: "只能
上传
jpg/png文件，且不超过500kb"
data() {
return {
upload
ing: false
methods: {
onExceed(files, fileList) {
this.$message.warning(`只能
上传
${this.limit}个文件`);
before
Upload
(file) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt500K = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error("
上传
图片只能是 JPG/PNG 格式!");
return false;
if (!isLt500K) {
this.$message.error("
上传
图片大小不能超过 500KB!");
return false;
return true;
onSuccess(response, file, fileList) {
this.
upload
ing = false;
this.$emit("
upload
-success", response, file, fileList);
onError(err, file, fileList) {
this.
upload
ing = false;
this.$emit("
upload
-error", err, file, fileList);
onProgress(event, file, fileList) {
this.
upload
ing = true;
this.$emit("
upload
-progress", event, file, fileList);
</script>
<style>
/* 可以根据自己的需要修改样式 */
.el-
upload
__tip {
font-size: 14px;
color: #999;
margin-top: 10px;
</style>
这个
Upload
组件
支持以下 props：
- `
upload
Url`：
上传
文件的接口地址
- `headers`：
上传
请求的 headers
- `formData`：
上传
请求的 formData
- `multiple`：是否支持多选文件
- `showFileList`：是否显示已
上传
文件列表
- `limit`：最多
上传
文件个数
- `buttonText`：
上传
按钮
的文本
- `tip`：
上传
提示信息
这个
Upload
组件
还支持以下事件：
- `
upload
-success`：
上传
成功的回调函数，参数为 response、file 和 fileList
- `
upload
-error`：
上传
失败的回调函数，参数为 err、file 和 fileList
- `
upload
-progress`：
上传
进度的回调函数，参数为 event、file 和 fileList
使用示例：
<template>
<my-
upload
:
upload
-url="
upload
Url"
:headers="headers"
:form-data="formData"
:multiple="multiple"
:show-file-list="showFileList"
:limit="limit"
:button-text="buttonText"
:tip="tip"
@
upload
-success="on
Upload
Success"
@
upload
-error="on
Upload
Error"
@
upload
-progress="on
Upload
Progress"
></my-
upload
>
</template>
<script>
import My
Upload
from "@/components/My
Upload
";
export default {
components: {
My
Upload
data() {
return {
upload
Url: "https://xxx.com/
upload
",
headers: {
token: "xxx"
formData: {
type: "avatar"
multiple: false,
showFileList: true,
limit: 1,
buttonText: "
上传
头像",
tip: "只能
上传
jpg/png文件，且不超过500kb"
methods: {
on
Upload
Success(response, file, fileList) {
console.log("
上传
成功", response, file, fileList);
on
Upload
Error(err, file, fileList) {
console.log("
上传
失败", err, file, fileList);
on
Upload
Progress(event, file, fileList) {
console.log("
上传
进度", event, file, fileList);
</script>
