使用element中的el-upload自定义上传文件

本文主要是介绍使用element中的el-upload自定义上传文件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

自定义文件上传步骤图

el-upload相关属性简介：

• http-request 自定义请求
• file-list 上传成功的所有文件
• list-type="picture"上传图片时，可显示图片缩略图预览
• action 可以使用普通字符串代替，没有什么意义，但不建议删除，因为我们使用http-request 这个指令
• :on-change=“changeFile” // 文件状态改变时的回调函数，添加文件、上传成功和上传失败时都会被调用

核心代码展示

<el-upload
  class="upload-demo"
  ref="upload"
  action=""
  list-type="picture"
  :multiple="true"
  :http-request="importFile"
  :on-change="onChange"
  :on-remove="onRemove"
  :file-list="fileList"
  accept=".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip" style="color:#fff">
    提示：仅允许上传“jpg”、“jpeg”、“png”或“gif”格式文件！
  </div>
</el-upload>

自定义上传文件参数FFILE、NAME、PARENT_ID

importFile () {
  this.formData = new FormData()
  this.fileList.forEach(item => {
    this.formData.append('FFILE', item.raw, item.raw.name)
  })
  this.formData.append('NAME', 'zzll/img')
  this.formData.append('PARENT_ID', this.imgFileId)
}

自定义完传参数据后可调接口传参

// 表单提交
dataFormSubmit () {
  let config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
  axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', this.formData, config).then(({data}) => {
    if (data && data.result === 'success') {
      this.$message({
        message: '上传文件成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          this.fileList = []
          this.$emit('refreshDataList')
          this.visible = false
        }
      })
    }
  }).catch(() => {
    this.$message.error('上传文件异常')
  })
}

上传文件的处理、判断

onChange (file, fileList) {
  // 这里做一些文件控制，注意：就算一次选取多个文件，这里依旧会执行多次
  let typeArray = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
  let isJPG = typeArray.indexOf(file.raw.type)
  if (isJPG === -1) {
    this.$message.error('上传头像图片只能是 jpg、jpeg、png或gif 格式！！！')
    fileList.pop()
  }
  this.fileList = fileList
},
onRemove (file, fileList) {
  this.fileList = fileList
}

完整代码展示

<template>
  <el-dialog title="上传文件" :visible.sync="visible" top="2%" :close-on-click-modal="false">
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      list-type="picture"
      :multiple="true"
      :http-request="importFile"
      :on-change="onChange"
      :on-remove="onRemove"
      :file-list="fileList"
      accept=".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip" style="color:#fff">
        提示：仅允许上传“jpg”、“jpeg”、“png”或“gif”格式文件！
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button size="small" type="primary" @click="dataFormSubmit()" class="dialogBtn">上传</el-button>
      <el-button class="btnCancel dialogBtn" size="small" @click="visible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        visible: false,
        imgFileId: '',
        fileList: [],
        formData: null
      }
    },
    methods: {
      init (imgId) {
        this.visible = true
        this.imgFileId = imgId
        this.fileList = []
      },
      onChange (file, fileList) {
        // 这里做一些文件控制，注意：就算一次选取多个文件，这里依旧会执行多次
        let typeArray = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
        let isJPG = typeArray.indexOf(file.raw.type)
        if (isJPG === -1) {
          this.$message.error('上传头像图片只能是 jpg、jpeg、png或gif 格式！！！')
          fileList.pop()
        }
        this.fileList = fileList
      },
      onRemove (file, fileList) {
        this.fileList = fileList
      },
      importFile () {
        this.formData = new FormData()
        this.fileList.forEach(item => {
          this.formData.append('FFILE', item.raw, item.raw.name)
        })
        this.formData.append('NAME', 'zzll/img')
        this.formData.append('PARENT_ID', this.imgFileId)
      },
      // 表单提交
      dataFormSubmit () {
        if (this.fileList.length > 0) {
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', this.formData, config).then(({data}) => {
            if (data && data.result === 'success') {
              this.$message({
                message: '上传文件成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.fileList = []
                  this.$emit('refreshDataList')
                  this.visible = false
                }
              })
            } else {
              this.$message.error(data.result)
            }
          }).catch(() => {
            this.$message.error('上传文件异常')
          })
        } else {
          this.$message.error('请先选取上传文件')
        }
      }
    }
  }
</script>

这篇关于使用element中的el-upload自定义上传文件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！