element ui 上传图片以及pdf组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 上传图片以及pdf组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 添加和编辑

使用:

<div>
<FileUpload
v-model="" //绑定数据
accept=".jpg, .jpeg, .png, .pdf"
/>
</div>文章来源地址https://www.toymoban.com/news/detail-572593.html

到了这里，关于element ui 上传图片以及pdf组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！