upload组件的参数属性
action | 必选参数,上传的地址 | string | — | — |
headers | 设置上传的请求头部 | object | — | — |
multiple | 是否支持多选文件 | boolean | — | — |
data | 上传时附带的额外参数 | object | — | — |
name | 上传的文件字段名 | string | — | file |
with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |
show-file-list | 是否显示已上传文件列表 | boolean | — | true |
drag | 是否启用拖拽上传 | boolean | — | false |
accept | 接受上传的文件类型(thumbnail-mode 模式下此参数无效) | string | — | — |
on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | — |
on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
on-change | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
before-upload | 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 | function(file) | — | — |
before-remove | 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 | function(file, fileList) | — | — |
list-type | 文件列表的类型 | string | text/picture/picture-card | text |
auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
http-request | 覆盖默认的上传行为,可以自定义上传的实现 | function | — | — |
disabled | 是否禁用 | boolean | — | false |
limit | 最大允许上传个数 | number | — | — |
on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |
常用的也只有下面这几个
multiple :是否支持多选文件,
show-file-list :是否显示已上传文件列表,
drag :是否启用拖拽上传,
accept :接受上传的文件类型(thumbnail-mode 模式下此参数无效),
on-preview :点击文件列表中已上传的文件时的钩子(查看文件),
on-remove :文件列表移除文件时的钩子(删除文件),
on-success :文件上传成功时的钩子,
on-progress :文件上传时的钩子,
before-upload :检查文件用的,
list-type :文件列表的类型,
auto-upload :是否选择了文件立即上传,一般默认立即上传,
file-list:文件列表,用来展示上传的文件,后面用来回显文件或图片有用(有固定的格式),
http-request :自定义上传,会覆盖默认的action上传,最常用,
limit :允许上传的最大格式
upload组件的方法
方法名 | 说明 | 参数 |
clearFiles | 清空已上传的文件列表(该方法不支持在 before-upload 中调用) | — |
abort | 取消上传请求 | ( file: fileList 中的 file 对象 ) |
submit | 手动上传文件列表 | — |
clearFiles :最常用
代码:(组件)
<template>
<div>
<el-upload ref="upload" :file-list="imgList" action="#" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :http-request="handleFileUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="onChange" :before-upload="handleBeforeUpload">
<i class="el-icon-plus" />
</el-upload>
<!-- 点击图片查看大图 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
//
import { videoApi } from '@/api/video.js'
// 上传文件的基路径前缀,上传文件的接口会返回一个路径,用来和https://yztest.zjrcq.cn/eyeValleyImg拼接
import { baseUrl } from '@/utils/pictureUrl'
export default {
name: '',
props: {
// 图片列表,用来实现回显,列表格式必须为[{ name: 'placard.jpeg', url: 'https://......' }]
imgList: {
default: '',
type: Array
}
},
data() {
return {
// 点击查看图片的路径
dialogImageUrl: '',
dialogVisible: false,
// 文件列表
fileList: [],
// 上传的数据
initForm: {
id: '',
picPath: '',
removed: false
},
showBtnDealImg: true,
noneBtnImg: false,
limitCountImg: 1 // 上传图片的最大数量
}
},
mounted() {},
methods: {
// 上传海报图
handleFileUpload(fileObject) {
videoApi.uploadImg(fileObject.file).then(res => {
const { msg, result } = res
if (result == 1) {
// 将图片地址拼接传给父组件
this.$emit('placardUpload', baseUrl + msg)
} else {
this.$message.warning(msg)
}
})
},
// 清空文件列表的方法,供父组件使用
clearFiles() {
this.$refs.upload.clearFiles()
},
// 移除
handleRemove(file, fileList) {
console.log(file, fileList)
this.$emit('placardUpload', fileList.join(''))
},
// 查看大图
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 检查图片
handleBeforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.warning('上传图片不能大于2M')
}
return true
},
onChange(file, fileList) {}
}
}
</script>
<style lang="scss">
.disUoloadSty .el-upload--picture-card {
display: none; /* 上传按钮隐藏 */
}
</style>
在使用的.vue文件中使用
<el-form-item label="海报图">
<placardUpload ref="placardUpload" :img-list="placardFileList" @placardUpload="placardUpload" />
</el-form-item>
placardFileList :为了实现图片回显的功能
placardUpload :接收子组件传过来的数据