Vorwort
-
Im eigentlichen Entwicklungsprozess müssen wir häufig Dateien und Bilder hochladen. Wir können eine globale Komponente kapseln, um sie aufzurufen.
-
Das Prinzip ist sehr einfach: Rufen Sie zunächst die Datei oder das Bildobjekt ab, rufen Sie die Schnittstelle des Dokumentenservers Ihres Unternehmens auf und laden Sie das Dateibild hoch.
-
Um die Benutzererfahrung zu erleichtern, sollten wir die Maskenebene vor dem Hochladen aktivieren und die Maskenebene nach erfolgreichem Hochladen schließen.
-
Wir können auch die URL und den Dateinamen anpassen, die an die übergeordnete Komponente zurückgegeben werden sollen, entsprechend dem tatsächlichen Entwicklungsszenario.
Code
1. Definieren Sie die API
export function uploadvideo (data) {
return request({
url: '/upload/video',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
data
})
}2. Erstellen Sie den DocUpload-Ordner/index.vue in src/components/ – der Code lautet wie folgt
<template>
<el-dialog
title="上传"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
>
<el-form ref="form" :model="form" size="small" label-width="80px">
<el-form-item label="文件名称:">
<el-input v-model="form.contitle" disabled></el-input>
</el-form-item>
<el-form-item label="文件上传:">
<div class="uppicture">
<input type="file" class="upinput" ref="file" @change="showimg" />
<i class="el-icon-plus" id="changes" @click="changeimg"></i>
<p>上传合同文件附件</p>
</div>
<el-button type="primary" class="uploadbutton" @click="addupload"
>上传附件</el-button
>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose" style="background: #f7f7f7" size="small"
>取 消</el-button
>
<!-- <el-button type="primary" @click="upload">确 定</el-button> -->
</span>
</el-dialog>
</template>
<script>
import { uploadvideo } from '@/api/entering'
// 遮罩层
import { Loading } from 'element-ui'
export default {
name: 'DocUpload',
data () {
return {
form: {
// 合同名称
contitle: ''
},
formdata: {}
}
},
props: {
// 显示隐藏
dialogVisible: {
type: Boolean,
// 必传
required: true
}
},
methods: {
// 关闭之前
handleClose () {
console.log('关闭之前')
// .sync语法糖,单向数据流问题,
// 父组件传递给子组件的数据,子组件直接修改会报错,需要传递给父组件修改
this.$emit('update:dialogVisible', false)
},
// 输入款获取事件
showimg () {
const that = this
console.log(that.$refs.file)
console.log(that.$refs.file.files[0])
// 文件名称复制
that.form.contitle = that.$refs.file.files[0].name
// 声明一个formdata对象
this.formdata = new FormData()
// 赋值需要传递的文件
this.formdata.append('multipartFile', that.$refs.file.files[0])
},
// 图标触发输入框事件
changeimg () {
// 点击图标时候，触发input选择文件按钮
this.$refs.file.dispatchEvent(new MouseEvent('click'))
},
// 上传附件
async addupload () {
// 上传文文件提示,未选择文件提示用户
if (!this.form.contitle) {
return this.$message.warning('请先在左侧上传文件')
}
//开启遮罩层
let loadingInstance = Loading.service({
lock: true, //lock的修改符--默认是false
text: '正在上传文件，请耐心等待', //显示在加载图标下方的加载文案
spinner: 'el-icon-loading', //自定义加载图标类名
background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
target: document.querySelector('#futureTransferDialog') //loadin覆盖的dom元素节点
})
const res = await uploadvideo(this.formdata)
console.log('文档服务器上传文件', res)
// 传递文件存储id
this.$emit('updataurl', res.data.url)
// 回显文件名称给父组件的form表单
this.$emit('updata', this.form.contitle)
// 清空表单
this.form.contitle = ''
this.formdata = {}
// 关闭弹框
this.handleClose()
//关闭遮罩层
loadingInstance.close()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
border-radius: 10px;
.el-dialog__header {
border-radius: 9px 9px 0 0;
background-color: #1488c6;
padding: 8px 20px;
.el-dialog__title {
color: white;
font-size: 16px;
}
.el-dialog__headerbtn {
top: 12px;
i {
color: white;
}
}
}
.el-dialog__footer {
text-align: center;
}
.el-dialog__body {
padding: 12px;
}
.uppicture {
width: 120px;
height: 120px;
border: 1px solid #717376;
position: relative;
cursor: pointer;
input {
width: 100%;
height: 100%;
vertical-align: middle;
opacity: 0;
}
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
// background-color: skyblue;
}
p {
position: absolute;
bottom: -2px;
left: 50%;
word-break: keep-all;
transform: translate(-50%);
}
.uploadbutton {
position: absolute;
bottom: 0;
margin-left: 20px;
position: relative;
}
&:hover {
color: #2da9fa;
border: 1px solid #2da9fa;
p {
color: #2da9fa;
}
}
}
.uploadbutton {
position: absolute;
top: 70%;
left: 150px;
}
}
</style>
3. Globale Komponentenregistrierung – weggelassen
4.Verwendung der übergeordneten Komponente
4.1 Komponentenverwendung
<DocUpload
:dialogVisible.sync="dialogannex"
// form是父组件表单，上传成功之后，直接通过子传父，把url和文件名称传递到父组件表单
@updata="form.name = $event"
@updataurl="form.ontractAttachment = $event"
></DocUpload>4.2 Daten der übergeordneten Komponente
// 上传组件开关
dialogannex: false,
// 表单
form: {},4.3 Offene Komponenten-Methoden
addupload () {
this.dialogannex = true
},Zusammenfassen:
Ich glaube, dass Sie nach diesem Prozess auch einen ersten tiefen Eindruck davon gewonnen haben, wie Vue Eingaben verwendet, um die globale Komponente des Hochladens von Dateien und Bildern zu kapseln. In der tatsächlichen Entwicklung sind die Situationen, denen wir jedoch begegnen, definitiv unterschiedlich, daher müssen wir sie verstehen Prinzip. , weichen Sie niemals von seinem Ursprung ab. Komm schon, schlag die Arbeiter!
Bitte weisen Sie auf etwaige Mängel hin, vielen Dank – Feng Guo Wuhen