前言

• 实际开发过程中，我们经常遇见需要上传文件图片功能，可以封装一个全局组件来调用

• 原理很简单，首先获取到文件或图片对象，调用自己公司文档服务器的接口，上传文件图片

• 为了方便用户体验，我们应该在上传之前开启遮罩层，上传成功之后关闭遮罩层。

• 我们还可以根据实际开发场景自定义把url和文件名称传回父组件

代码实现

1.定义api

export function uploadvideo (data) {return request({url: '/upload/video',method: 'post',headers: { 'Content-Type': 'multipart/form-data' },data})
}

2.在src/components/建立DocUpload文件夹/index.vue-代码如下

<template><el-dialogtitle="上传":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 = thisconsole.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的修改符--默认是falsetext: '正在上传文件，请耐心等待', //显示在加载图标下方的加载文案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)// 传递文件存储idthis.$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.全局组件注册-省略

4.父组件使用

4.1组件使用

<DocUpload:dialogVisible.sync="dialogannex"//  form是父组件表单，上传成功之后，直接通过子传父，把url和文件名称传递到父组件表单@updata="form.name = $event"@updataurl="form.ontractAttachment = $event"></DocUpload>

4.2父组件data

 // 上传组件开关dialogannex: false,// 表单form: {},

4.3打开组件-methods

addupload () {this.dialogannex = true
},

---

总结：

经过这一趟流程下来相信你也对 vue-使用input封装上传文件图片全局组件 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

有什么不足的地方请大家指出谢谢 -- 風过无痕