element中的el-upload附件上传与附件回显
作者:左手牵♪♡右手
这篇文章主要介绍了element中的el-upload附件上传与附件回显方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
开发中经常也会遇到附件的上传和回显,最方便的就是我们封装一个公共组件在页面中引用
1、上传
在src里面新建一个文件夹
<template> <el-upload class="upload-demo" multiple :limit="limit" :accept="accept" :headers="headers" :file-list="fileList" :action="uploadImgUrl" :on-exceed="handleExceed" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload" :on-error="handleUploadError"> <!-- :on-preview="handlePreview" --> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip" style="color:#909399"> 支持上传{{ accept === "*" ? "所有" : accept }}文件,且不超过20MB,附件名称不能超过50字 </div> </el-upload> </template>
<script> import { getToken } from '@/utils/auth' export default { components: {}, props: { value: { type: String, default: null }, accept: { type: String, default: '*' }, limit: { type: Number, default: 1 } }, data () { return { uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址 headers: { Authorization: 'Bearer ' + getToken() }, fileList: [], returnData: [] } }, watch: {}, mounted () { this.value === null && this.value === '' ? (this.fileList = []) : this.getFileList() }, methods: { getFileList () { if (this.value !== null && this.value !== '') { const accessory = JSON.parse(this.value) this.fileList = [] accessory.map(val => { this.fileList.push({ name: val.name, // 编辑修改 // response: { // fileName: val.url // }, response: { data: { fileName: val.url } } }) }) } }, // 删除上传文件后 handleRemove (file, fileList) { this.getReturnData(fileList) }, // 上传前------------文件大小和格式校验 beforeUpload (file) { if (this.accept !== '*') { var fileType = file.name.substring(file.name.lastIndexOf('.') + 1) const accept = this.accept.split(',') if (accept.indexOf('.' + fileType) < 0) { this.$message.warning('请选择正确的文件格式') return false } } const isLt50M = file.size / 1024 / 1024 < 20 if (!isLt50M) { this.$message.warning('上传附件大小不能超过 20MB!') return false } return true }, // 附件上传成功后的钩子 handleSuccess (response, file, fileList) { if (response.code === 200) { this.getReturnData(fileList) } else { this.$message.error(response.msg) this.fileList=[] } }, handleUploadError () { this.$message({ type: 'error', message: '上传失败' }) }, // 获取附件信息后进行返回处理 getReturnData (fileList) { this.returnData = [] console.log(fileList) fileList.map(val => { this.returnData.push({ name: val.name, url: val.response.data.fileName }) }) this.$emit('input', JSON.stringify(this.returnData)) }, // 点击上传文件的钩子 handlePreview (file) { var a = document.createElement('a', '_bank') var event = new MouseEvent('click') a.download = file.name a.href = file.response.url a.dispatchEvent(event) }, // 文件超出个数限制时的钩子 handleExceed (files, fileList) { this.$message.warning(`当前限制只能上传 ` + this.limit + ` 个文件`) }, // 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 beforeRemove (file, fileList) { return this.$confirm(`确定移除 ${file.name}?`) } } } </script>
代码中这个import { getToken } from ‘@/utils/auth’,其实是获取的存在Cookies里面的token的值,大家可以根据自己项目情况进行修改使用
在页面中直接引入使用就可以了:
2、附件回显
和上传一样同样新建一个文件夹
<template> <div class="upload-detail"> <div class="detail" style="line-height:20px" v-if="accessory === '[]' || accessory === null">无</div> <div v-else> <template v-for="(val,key) in upload.fileList"> <el-link :key="key" class="detail" :underline="false" @click="handlePreview(val)">{{val.name}} <span class="icon-emad- icon-emad-xiazai"> 下载</span> </el-link> </template> </div> </div> </template>
<script> export default { data () { return { upload: { // 上传的地址 url: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的文件列表 fileList: [] } } }, props: { accessory: { type: String, default: '[]' } }, created () { this.getInfo(this.accessory) }, methods: { getInfo (accessory) { this.upload.fileList = [] if (accessory !== '[]' || accessory !== null) { let list = JSON.parse(accessory) list.map(val => { this.upload.fileList.push({ name: val.name, url:process.env.VUE_APP_BASE_API + val.url }) }) } }, // 点击上传----------------文件下载 handlePreview (file) { var a = document.createElement('a'); var event = new MouseEvent('click'); a.download = file.name; a.href = file.url; a.dispatchEvent(event); } } }; </script>
<style lang="scss" scoped> ::v-deep .el-upload-list { height: auto; overflow: hidden; } .detail { line-height: 20px; display: block; .icon-emad- { color: rgba(98, 173, 255, 1); } } </style>
页面中引入使用:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。