7.0 KiB
7.0 KiB
自定义文件上传
<template>
<el-dialog
title="匿名反馈"
:visible.sync="visible"
@close="closeFeedbackDialog"
>
<el-form>
<el-form-item :label-position="labelPosition" label="附件">
<!--
limit 最多选择一个文件进行上传，
http-request 上传所执行的方法，上传多个文件便执行多次
auto-upload 选中文件后自动进行上传
-->
<el-upload
style="width:100%"
drag
action="/"
ref="upload"
:limit="1"
:http-request="httpRequest"
:auto-upload="false"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
附件总大小不能超过100MB
</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeFeedbackDialog">取 消</el-button>
<el-button
type="primary"
@click="sendFeedback"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-text="邮件正在发送请稍等"
>确 定</el-button
>
</div>
</el-dialog>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
visible: false,
feedback: {
title: '匿名反馈',
to: '123@qq.com'
},
labelPosition: 'top',
fileList: [],
fileData: null,
fileSize: 0,
fullscreenLoading: false
}
},
methods: {
// 关闭对话框并重置
closeFeedbackDialog() {
this.reset()
this.visible = false
},
// param中获取文件对象 进行上传，如果多个文件会执行多次此方法发送多个请求
httpRequest(param) {
this.fileSize = 0
this.fileSize = param.file.size
//验证文件大小
if (this.fileSize / 1024 / 1024 >= 100) {
this.$message.error('附件总大小不能超过100MB')
return
}
this.fileData = new FormData();
//获取文件
this.fileData.append('files', param.file)
//如果需要其他参数可以使用append进行添加
this.fileData.append('to', this.feedback.to)
this.fileData.append('title', this.feedback.title)
//上传地址
let url = 'http://192.168.3.101:60001/mail/send'
//配置请求头信息
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
//开启加载
this.fullscreenLoading = true
//进行请求
axios.post(url, this.fileData, config).then(res => {
//关闭加载
this.fullscreenLoading = false
if (res.data.code === 1) {
this.$message.success('发送成功')
//上传成功执行关闭方法关闭对话框
this.closeFeedbackDialog()
} else {
this.$message.error(res.data.msg)
}
}).catch(error=>{
this.fullscreenLoading = false
this.$message.error("发送邮件时出现异常,请联系管理员！")
})
},
//发送邮件
sendFeedback() {
//提交时自动执行httpRequest方法保存要上传的文件到this.fileData
this.$refs.upload.submit()
},
reset() {
this.fileList = []
}
}
}
</script>
<style>
.el-upload {
width: 100% !important;
}
.el-upload-dragger {
width: 100% !important;
}
</style>
一次请求上传多个文件（推荐使用）
<template>
<el-dialog
title="匿名反馈"
:visible.sync="visible"
@close="closeFeedbackDialog"
>
<el-form>
<el-form-item :label-position="labelPosition" label="附件">
<!--
file-list 选中的文件列表，
http-request 上传所执行的方法，上传多个文件便执行多次
auto-upload 选中文件自动上传
-->
<el-upload
style="width:100%"
class="upload"
drag
action="/"
multiple
ref="upload"
:http-request="httpRequest"
:auto-upload="false"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
附件总大小不能超过100MB
</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeFeedbackDialog">取 消</el-button>
<el-button
type="primary"
@click="sendFeedback"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-text="邮件正在发送请稍等"
>确 定</el-button
>
</div>
</el-dialog>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
visible: false,
feedback: {
title: '匿名反馈',
to: '123@qq.com'
},
labelPosition: 'top',
fileList: [],
fileData: null,
fileSize: 0,
fullscreenLoading: false
}
},
methods: {
// 关闭对话框并重置
closeFeedbackDialog() {
this.reset()
this.visible = false
},
// this.$refs.upload.submit() 提交时会自动调用 httpRequest方法，在param获取文件对象。
httpRequest(param) {
this.fileData.append('files', param.file)
this.fileSize += param.file.size
},
//发送邮件
sendFeedback() {
this.fileSize = 0
this.fileData = new FormData();
//提交时自动执行httpRequest方法保存要上传的文件到this.fileData
this.$refs.upload.submit()
//验证文件大小
if (this.fileSize / 1024 / 1024 >= 100) {
this.$message.error('附件总大小不能超过100MB')
return
}
//如果需要其他参数可以使用append进行添加
this.fileData.append('to', this.feedback.to)
this.fileData.append('title', this.feedback.title)
//上传地址
let url = 'http://192.168.3.101:60001/mail/send'
//配置请求头信息
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
//开启加载
this.fullscreenLoading = true
//进行请求
axios.post(url, this.fileData, config).then(res => {
//关闭加载
this.fullscreenLoading = false
if (res.data.code === 1) {
this.$message.success('发送成功')
//上传成功执行关闭方法关闭对话框
this.closeFeedbackDialog()
} else {
this.$message.error(res.data.msg)
}
}).catch(error=>{
this.fullscreenLoading = false
this.$message.error("发送邮件时出现异常,请联系管理员！")
})
},
reset() {
this.fileList = []
}
}
}
</script>
<style>
.el-upload {
width: 100% !important;
}
.el-upload-dragger {
width: 100% !important;
}
</style>