vue-使用input封装上传文件图片全局组件

前言

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

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

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

• 我们还可以根据实际开发场景自定义把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-代码如下

​

​

​

3.全局组件注册-省略

4.父组件使用

4.1组件使用

4.2父组件data

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

4.3打开组件-methods

addupload () {
      this.dialogannex = true
},

---

总结：

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

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