el-upload 上传文件方法
<template>
<div class="addEventDialog">
<el-upload
:limit="1"
:on-exceed="uploadExceed"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:http-request="uploading"
:file-list="fileList"
accept=""
ref="upload"
>
<i class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img class="el-upload-list__item-thumbnail" style="width: 100%; height: 100%" :src="file | picFilter" />
<div style="margin-top: -8px">{{ file.name }}</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'addEventDialog',
props: ['dialogVisible', 'formInfo', 'isCode'],
watch: {
dialogVisible(v) {
this.dialogVisible = v
if (v) {
this.form = Object.assign({}, JSON.parse(JSON.stringify(this.formInfo)))
if (this.form.file) {
this.files = this.form.file
this.fileList = this.form.file.split(',').map((item) => {
return {
name: item.split('/').pop(),
percentage: 0,
raw: File,
size: 6194,
status: 'ready',
uid: item.split('/').pop() + new Date().getTime(),
url: item
}
})
}
}
}
},
data() {
return {
files: null,
dialogVisible1: false,
dialogImageUrl: '',
fileList: [],
rules: {},
loading: false,
kindList: [],
typeList: [],
sourceList: [],
typeList1: [],
streetList: [],
communityList: [],
videoShow: '',
addForm: {
video: ''
},
form: {
department: '',
person: '',
dealTime: '',
feedback: ''
},
gpsInfo: '',
timeout: null,
videoHidden: false
}
},
filters: {
picFilter(flie) {
console.log(flie)
if (
flie.name.includes('.jpg') ||
flie.name.includes('.png') ||
flie.name.includes('.gif') ||
flie.name.includes('.bmp') ||
flie.name.includes('.jpeg') ||
flie.name.includes('.JPG') ||
flie.name.includes('.PNG') ||
flie.name.includes('.GIF') ||
flie.name.includes('.BMP') ||
flie.name.includes('.JPEG')
) {
flie.isShow = true
return flie.url
} else if (flie.name.includes('.docx')) {
flie.isShow = false
return require('../../assets/fileImg.png')
} else if (flie.name.includes('.pptx')) {
flie.isShow = false
return require('../../assets/power.png')
} else if (flie.name.includes('.xlsx')) {
flie.isShow = false
return require('../../assets/excel.png')
} else if (flie.name.includes('.pdf') || flie.name.includes('.PDF')) {
flie.isShow = false
return require('../../assets/pdf.png')
} else {
flie.isShow = false
return require('../../assets/other.png')
}
}
},
methods: {
reset() {
this.loading = false
this.fileList = []
this.files = null
this.form = {}
this.$refs.formLabel.clearValidate()
},
handleOk() {
this.$refs.formLabel.validate((valid) => {
if (valid) {
this.submitAll()
} else {
this.$message.warning('检查表单输入内容的合法性！')
return false
}
})
},
submitAll() {
this.loading = true
let newForm = {
department: this.form.department
}
if (this.files) {
newForm.file = this.files
} else {
newForm.file = null
}
let url = ''
url = '/binhuapis/dapeng/eventTask/edit'
request.post(url, newForm).then((r) => {
this.loading = false
if (r.data.code === 200) {
this.$message.success('响应成功！')
this.$emit('success')
this.reset()
this.$emit('update:dialogVisible', false)
} else {
this.$message.error(r.data.message)
}
})
},
handleRemove(file) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
let fileUrl = ''
if (this.fileList && this.fileList.length > 0) {
console.log(this.fileList, 'this.fileListthis.fileList')
this.fileList.forEach((item) => {
if (item.name === file.name) {
fileUrl = item.url
} else {
fileUrl = file.url
}
})
} else {
fileUrl = file.url
}
let url = '/binhuapis/file/delete?url=' + fileUrl
request.get(url).then((res) => {
this.files = null
this.fileList = []
this.$message.success('删除成功！')
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible1 = true
},
handleDownload(file) {
let url2 = file.url.replace(/\\/g, '/')
let xhr = new XMLHttpRequest()
xhr.open('GET', url2, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
this.saveAs(xhr.response, file.name)
}
}
xhr.send()
},
saveAs(data, name) {
let urlObject = window.URL || window.webkitURL || window
let export_blob = new Blob([data])
let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob)
save_link.download = name
save_link.click()
},
uploading(e) {
let url = '/binhuapis/file/upload'
let formData = new FormData()
formData.append('file ', e.file)
request
.post(url, formData)
.then((res) => {
if (res.data.code === 200) {
this.files = res.data.data
let files = {
name: e.file.name,
url: res.data.data
}
this.fileList.push(files)
}
})
.catch((e) => {
this.$message.error(e.response.data.message)
})
},
uploadExceed(file, fileList) {
this.$message.error('只能上传一个文件')
}
}
}
</script>
<style lang="scss">
</style>
<el-upload
class="attachmentUpload"
action="#"
list-type="picture-card"
:http-request="uploading"
:file-list="fileList"
accept=".jpg, .png, .xlsx, .xlc, .xlm, .xls, .xlt, .xlw, .csv, .doc, .docx, .pdf, .PDF"
ref="upload"
:before-upload="beforeAvatarUpload"
:disabled="attachFilesDisabled"
:class="objClass"
>
<i class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img
class="el-upload-list__item-thumbnail"
style="width: 100%; height: 50%; margin-top: 5px; object-fit: contain; object-position: 50% 20%"
:src="file | picFilter"
/>
<div style="margin-top: -10px">{{ file.name }}</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" v-if="file.isShow">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)" v-if="title === '新增消息'">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
watch: {
detailsDialog: {
handler(v) {
this.dialogVisible = v
if (v) {
if (this.title !== '新增消息') {
this.formData = JSON.parse(JSON.stringify(this.detailsDialogData))
if (this.formData.imgUrl === '') {
this.fileList = []
} else {
let data = this.formData.imgUrl.split(',')
data.some((e) => {
let fileName = e.split('/')
let files = {
name: fileName[fileName.length - 1],
url: e
}
this.fileList.push(files)
})
}
if (this.title === '已发消息详情') {
this.getSendMessage()
}
}
}
}
}
},
sendMessage() {
this.$refs.formData.validate((valid) => {
if (valid) {
let formData = new FormData()
formData.append('messageTitle', this.formData.messageTitle)
let is50M = 0
if (this.fileList.length !== 0) {
for (var i = 0; i < this.fileList.length; i++) {
is50M += this.fileList[i].size
formData.append('files', this.fileList[i].raw)
}
}
const is50MBoolen = is50M / 1024 / 1024 < 50
if (!is50MBoolen) {
this.$notify.error({
title: '错误',
message: '上传文件总和大小不能超过 50MB!',
duration: 1000
})
} else {
axios.post('/binhuapis/saveMessageInfo', formData).then((res) => {
if (res.data.code === 200) {
this.handleClose()
this.$emit('success')
this.$notify({
title: '成功',
message: '发送成功！',
type: 'success',
duration: 1000
})
} else {
this.$notify({
title: '警告',
message: '错误，' + res.data.message,
type: 'warning',
duration: 1000
})
}
})
}
} else {
this.$notify({
title: '警告',
message: '检查表单输入内容的合法性！',
type: 'warning',
duration: 1000
})
return false
}
})
},
uploading(e) {
console.log(e)
this.fileList = this.$refs.upload.uploadFiles
},
handleRemove(file) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
let arr = this.$refs.upload.uploadFiles
let index = arr.indexOf(file)
arr.splice(index, 1)
this.fileList.splice(index, 1)
this.$message.success('删除成功！')
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handlePictureCardPreview(file) {
console.log(file)
this.dialogImageUrl = file.url
this.fileDialogVisible = true
},
beforeAvatarUpload(file) {
console.log(file)
const is20M = file.size / 1024 / 1024 < 20
if (!is20M) {
this.$notify.error({
title: '错误',
message: '上传文件大小不能超过 20MB!',
duration: 1000
})
return false
}
return true
},
handleDownload(file) {
console.log(file)
let url2 = file.url.replace(/\\/g, '/')
let xhr = new XMLHttpRequest()
xhr.open('GET', url2, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
this.saveAs(xhr.response, file.name)
}
}
xhr.send()
},
saveAs(data, name) {
let urlObject = window.URL || window.webkitURL || window
let export_blob = new Blob([data])
let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob)
save_link.download = name
save_link.click()
},
