前言

• 實際開發過程中，我們經常遇見需要上傳文件圖片功能，可以封裝一個全局組件來調用

• 原理很簡單，首先獲取到文件或圖片對象，調用自己公司文檔服務器的接口，上傳文件圖片

• 為了方便用戶體驗，我們應該在上傳之前開啟遮罩層，上傳成功之后關閉遮罩層。

• 我們還可以根據實際開發場景自定義把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封裝上傳文件圖片全局組件 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

有什么不足的地方請大家指出謝謝 -- 風過無痕