elementui结合vue2实现文件上传封装组件

功能实现：将el-upload封装成独立的组件，在其他组件调用的时候直接引入即可，通过v-moal传值

1、新建file.vue组件

<template>
  <div>
    <el-upload
      :accept="accept"
      :action="fileUrl" 
      :before-upload="checkFileType"
      :disabled="disabled"
      :file-list="fileList"
      :headers="headers"
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
    >
      <el-button type="primary">{{ btnName }}</el-button>
    </el-upload>
    <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
      <img alt="" :src="dialogImageUrl" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
  import { getAccessToken } from '@/utils/accessToken'
  import { value } from 'lodash/seq'

  export default {
    name: 'InputUpload',
    props: {
      value: {
        type: String,
        default: '',
      },
      limit: {
        type: Number,
        default: 1,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      accept: {
        type: String,
        default: null,
      },
      btnName: {
        type: String,
        default: '选择文件',
      },
      btnType: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        fileUrl:'',//服务器地址
        fileList: [],
        dialogImageUrl: '',//获取上传的图片路劲
        dialogVisible: false,//图片预览控制
        headers: {//服务器需要的数据
          Authorization: null,
        },
      }
    },
    watch: {
      value(newValue) {
        this.handleValueToFileList(newValue)
      },
    },
    created() {
      this.headers.Authorization = `Bearer ${getAccessToken()}`//根据实际需要甚至服务器需要的数据
      this.handleValueToFileList(this.value)
    },
    methods: {
    //上传文件之前判断文件的类型
      checkFileType(file) {
        const fileName = file.name
        const fileType = fileName.substring(fileName.lastIndexOf('.'))
        if (
          this.btnType == -1 &&
          fileType !== '.jpg' &&
          fileType !== '.jpeg' &&
          fileType !== '.png' &&
          fileType !== '.pdf' &&
          fileType !== '.doc' &&
          fileType !== '.docx' &&
          fileType !== '.txt'
        ) {
          this.$message.error('请上传jpg、jpge、png或world、pdf文件的图片！')
          return false
        }
        if (this.btnType == 0 && fileType !== '.jpg' && fileType !== '.jpeg' && fileType !== '.png') {
          this.$message.error('请上传jpg、jpge或png的图片！')
          return false
        }
        if (this.btnType == 1 && fileType !== '.pdf' && fileType !== '.doc' && fileType !== '.docx' && fileType !== '.txt') {
          this.$message.error('请上传txt、pdf、doc或docx的文件！')
          return false
        }
        if (this.btnType == 2 && fileType !== '.mp4' && fileType !== '.MP4') {
          this.$message.error('请上传mp4的文件！')
          return false
        }
        return true
      },
      //：根据后台需要的数据设置格式
      handleValueToFileList(value) {
        this.fileList = value
          ? JSON.parse(value).map((file) => ({
              name: file.fileOldName,
              url: file.url,
              uid: file.fileNewName,
              type: file.fileType,
              size: file.fileSize,
            }))
          : []
      },
      //回填
      handleValueChange(file_List) {
        this.$emit(
          'input',
          JSON.stringify(
            file_List.map((file) => ({
              fileNewName: file.uid,
              fileOldName: file.name,
              url: file.url,
              fileType: file.type,
              fileSize: file.size,
            }))
          )
        )
      },
      handleSuccess(response, file, fileList) {
        let file_List = [...this.fileList]
        file_List.push({
          name: response.fileOldName,
          url: response.url,
          uid: response.fileNewName,
          type: response.fileType,
          size: response.fileSize,
        })

        this.fileList = file_List

        this.handleValueChange(file_List)
      },
      handleRemove(file, fileList) {
        this.handleValueChange(fileList)
        this.fileList = fileList
      },
      //图片预览
      handlePictureCardPreview(file) {
        console.log(file)
        if (file.type == 'jpg' || file.type == 'png' || file.type == 'jpeg' || file.type == 'JPG') {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        }
        if (file.type == 'pdf' || file.type == 'png' || file.type == 'doc' || file.type == 'docx' || file.type == 'txt') {
          window.open(this.$imgUrl + file.url, '_blank')
        }
      },
    },
  }
</script>

2、页面调用

引入

  import InputUpload from '@/components/InputUpload/file.vue'

页面

 <el-form  :model="form" >
 <el-form-item label="相关内容">
      <input-upload v-model="form.pic" accept=".jpg,.jpeg,.png" :btn-name="'选择图片'" :btn-type="0" :limit="1" />
    </el-form-item>
      </el-form>

其中form.pic即为上传到服务器之后后台返回来的数据