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/*"上传文件的现在类型
后面的意思含义请浏览官网文档很清晰的

  <el-form>
      <el-upload
        :limit="limit"
        action=""
        accept="image/*"
        :http-request="uploadFile"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        ref="upload"
      >
      <img src="../assets/common_images/uploadImage.png" width="146" height="146">
    </el-upload>
    <el-form-item>
      <el-button size="small" type="primary" style="margin-top: 20px;" @click="submitUpload">点击上传</el-button>
    </el-form-item>
  </el-form>

接收的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
  })
}

所有脚本

<script>
import {
  uploadImg,
  delUpIamge
} from '@/api/publicSeries'
export default {
  props: {
    limit: Number,
    fileList: Array
  },
  data() {
    return {
      imgUrl: ''
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    uploadFile(e) {
      const file = e.file
      const size = file.size / 1024 / 1024 / 2
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      } else if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      } else {
        const params = new FormData()
        params.append('multipartFile', file) // 图片
        uploadImg(params).then(res => {
          if (res.code === 200) {
            this.$message.success('上传成功')
            this.imgUrl = res.data.filePath
            this.$emit('getUrl', this.imgUrl)
          } else {
            this.$message.error('上传失败')
          }
        })
      }
    },
    // 图片上传超过数量限制
    handleExceed(files, fileList) {
      this.$message.error('图片数量超出限制!')
      console.log(files, fileList)
    },
    // 删除图片
    beforeRemove(file, fileList) {
      const url = file.url
      console.log('删除图片',file.url)
      this.$emit('handleRemove', url)
      delUpIamge(url).then(response => {
        this.$message.success('删除成功!')
      })
    }
  }
}
</script>

子级使用
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)
},
}
调用

 <UploadImg :limit="6" :file-list="fileList" @getUrl="getUrl" @handleRemove="handleRemove" />

效果
在这里插入图片描述
将el-upload二次封装主要是减少后续的代码使用量不要在过多写部分重复代码

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

猜你喜欢