element ui 上传图片以及pdf组件

最新推荐文章于 2025-05-12 15:00:52 发布

tararus1

最新推荐文章于 2025-05-12 15:00:52 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： elementui 前端

本文链接：https://blog.csdn.net/tararus1/article/details/126304659

本文介绍了一个基于Vue的文件上传组件，支持图片及PDF文件的上传、预览、删除等功能，并详细展示了组件配置项及使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FileUpload.vue

</div>

</div>
</el-upload>

<el-dialog :visible.sync="previewVisible">
<img width="100%" :src="previewImgUrl" alt="" />
</el-dialog>
</div>
</template>

import logo from '@/assets/pdf.png'

export default {
name: 'FileUpload',
props: {
value: {
type: [String, Array],
default: ''
},
// 上传的地址
action: {
type: String,
default: '', //上传接口
},
// 设置上传的请求头部
headers: {
type: Object,
default: () => {
return {}
},
},
// 上传文件大小限制，默认 50M，单位M
size: {
type: [Number, String],
default: 50,
},
// 文件上传格式，默认jpeg, png,jpg
accept: {
type: String,
default: 'image/jpeg,image/png',
},
// 是否显示删除操作按钮
deleted: {
type: Boolean,
default: true,
},
// 是否显示预览操作按钮
preview: {
type: Boolean,
default: true,
},
// 是否显示下载操作按钮
download: {
type: Boolean,
default: true,
},
// 上传文件个数限制，默认0 不限制
limit: {
type: [Number, String],
default: 0,
},
},
data() {
return {
fileList: [], // 默认文件列表
hideUpload: false, // 超出限制掩藏上传按钮
uploading: false, // 是否上传中,上传时隐藏上传按钮
previewImgUrl: '', // 预览图片地址
previewVisible: false, // 是否显示预览
pdf: logo,
files: [], // 文件url数组
}
},
watch:{
value: {
handler(val, old){
console.log('FileUpload=', val)
if(val){
this.files = val
this.fileList = [] // 先清空
for(var i=0; i<val.length;i++){
this.fileList.push({
url: val[i] // 转化
})
}
this.handleChange()
}
},
deep: true,
immediate: true // 避免在子组件中监听失效
}
},
methods: {
emitInput() {
this.$emit('input', this.files)
},
// 判断是否pdf
isPDF(url) {
if(!url){
return false
}
const fileType = ['pdf']
const index = url.lastIndexOf('.')
const type = url.substr(index + 1)
return fileType.indexOf(type) > -1
},
// 文件上传成功
handleImageSuccess(res) {
if (res.code === 200) {
this.files.push(res.data.file)
this.emitInput()
} else {
this.$message.error('文件上传失败')
}
},
// 上传前文件大小判断
beforeUpload(file) {
const { size } = this
const overSize = size > 0 && file.size < 1024 * 1024 * size
if (!overSize) this.$message.error(`上传文件大小不能超过 ${size}MB!`)
this.uploading = overSize // 是否上传中
return overSize
},
// 上传出错返回
handleError(event, file, fileList) {
console.log(event, file, fileList, 'error')
this.$message.error('服务出错，上传失败！')
this.handleChange()
},
// 删除图片
async handleRemove(file) {
this.$confirm(`确认删除文件?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const { fileList } = this
this.files = this.files.filter((v) => v !== file.url)
this.emitInput()
}).catch(()=>{})
},
// 图片预览
handlePreview(file) {
if(this.isPDF(file.url)){
window.open(file.url, "_blank");
} else {
this.previewImgUrl = file.url
this.previewVisible = true
}
},
handleChange(file, list) {
const { limit, fileList } = this
if (limit > 0 && fileList.length >= limit) this.hideUpload = true
else this.hideUpload = false
this.uploading = false
},
handleDownload(file) {
window.open(file.url, "_blank");
/*const a = document.createElement('a')
a.href = file.url
a.click() // 模拟点击事件，实现图片文件的同源下载
*/
},
},
}
</script>

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 148px;
height: 148px;
}
.el-upload-list--picture-card .el-upload-list__item {
background-color: inherit;
border: none;
width: 148px;
height: 148px;
}
</style>

在main.js中引入并全局注册:

import FileUpload from '@/components/upload/FileUpload.vue'

Vue.component('FileUpload', FileUpload) // 图片/pdf 添加和编辑

使用: