vue element-ui el-upload上传插件二次封装

首先附element-ui官方文档： https://element.eleme.cn/#/zh-CN/component/upload
我这里在组件中主要使用el-upload的上传、文件列表、删除等功能 下面会有详细代码、首页如果要使用项目必须是vue且结合element-ui的项目
组件渲染代码以及解释：
（1）我这里是手动上传文件 如果需要自动上传 将:auto-upload=“false” 改为:auto-upload="true"即可 那么
这一部分便是多余的操作了
（2）：:limit="limit"将属性传递给子级自定义上传文件数量
（3）：action=""文件接收的接口可以直接写上地址 也可以交给:http-request=“uploadFile”"uploadFile函数进行处理
（4）：accept="image/*"上传文件的现在类型
后面的意思含义请浏览官网文档 很清晰的

  
      
      
    
    
      点击上传
    
  

接收的api

import {
  uploadImg,
  delUpIamge
} from '@/api/publicSeries'

publicSeries部分 注 这种操作需要封装axios的请求

import request from '@/utils/request'
// 图片删除
export function delUpIamge(filePath){
  return request({
    url: 'api地址',
    method: 'post',`在这里插入代码片`
    params: { filePath }
  })
}
// 上传图片
export function uploadImg(data){
  return request({
      url: 'api地址',
      method: 'post',
      headers:[{'Content-Type': 'multipart/form-data'}],
      data
  })
}

所有脚本

子级使用
import UploadImg from ‘@/UploadImg/SecendsUpload’ // 因为组件
components: {
UploadImg
},
methods：{
//子级获取上传文件的链接
getUrl(getUrl) {
this.delUrl = getUrl
},
//子级删除当前文件的链接（如果接受文件路径是数组时 使用此方法）
handleRemove(url) {
console.log(url)
const delurl = this.temp.images.indexOf(url)
this.temp.images.splice(delurl, 1)
},
}
调用

效果

将el-upload二次封装主要是减少后续的代码使用量不要在过多写部分重复代码