Simple encapsulation front-end upload files/images

preface

Recently, various types of file upload functions have been used in the project, so a simple package based on Elment – UI is easier to use

The body of the

1. The introduction of

import TestUpload from '.. /components/common/DialogButton/upload' 
export default {
     components: { TestUpload },
Copy the code

2. use

<template>
    <div>
        <test-upload :file-name="name"
        :FileTypeErrorText="[' Only image files can be uploaded ', 'upload file size cannot exceed 10M']"
        :FileLimit="10"
        :limit="1"
        :FileTypeList="['JPG']"
        :file-type="uploadType"
        @success="appendFile"/>
        <el-button type="primary" @click="getFormData"</el-button> </div> </template> <script> import TestUpload from'.. /components/common/DialogButton/upload' 
export default {
     components: { TestUpload },
    data() {
        return {
            name: 'file'// uploadType:'fileDrag'Picview, file, fileDrag, picfile form: new FormData()}}, methods: { appendFile(formData) { console.log(formData.get(this.name)) this.form.append(this.name, formData.get(this.name)) },getFormData() {
            console.log(this.form.get('file'}}} </script>Copy the code

Attribute definitions

FileName: defines the attribute name in the outgoing formData parameter. It can be interpreted as the file defines the interface attribute when it is sent to the background. The internal received type is String

FileLimit: defines the maximum file upload size, expressed in M. The internal receive type is Number

FileTypeList: specifies the type of the uploaded file. The internal receive type is Array

FileType: defines the display style of the selected uploaded file. The internal receive type is String

FileTypeErrorText: defines the contents of the error message (type or size) when uploading a file. The first item indicates the type error message, and the second item indicates the size error message. The current attribute must be transmitted, and the internal receive type is Array

Limit: specifies the number of uploaded files. The default value is not limited. The internal receiver type is Number

File-type: defines the creation upload Type, including:

File file type,

Picview image preview type, click on the image preview to enlarge

Picfile file type,

FileDrag Drag file type

The @success: method executes the callback with formData as the returned information about the uploaded file. The parameter is of type formData. This function is triggered every time an upload is made. Formdata.get (fileName) can be used to get the currently uploaded file

Upload the component encapsulation code

<template>
<div>
  <el-upload
    v-if="FileType === 'picfile'"
    :show-file-list="true"
    :http-request="fnOSSUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :limit="limit"
    :on-exceed="onExceed"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
    class="upload-demo"
    action=""
    list-type="picture">
    <el-button size="small" type="primary"<div slot= </el-button"tip" class="el-upload__tip"</div> </el-upload> <! <el-upload v-if= --> <el-upload v-if="FileType === 'picview'"
    :show-file-list="true"
    :http-request="fnOSSUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :limit="limit"
    :on-exceed="onExceed"
    :on-preview="handlePictureCardPreview"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :file-list="fileList"
    :before-upload="beforeAvatarUpload"
    action=""
    list-type="picture"
  >
    <el-button size="small" type="primary"<div slot= </el-button"tip" class="el-upload__tip"</div> </el-upload> <el-dialog :visible.sync= upload JPG/PNG files only and not more than 500KB"dialogVisible" :append-to-body="true">
    <img :src="dialogImageUrl" width="100%" alt=""> </el-dialog> <! --> <el-upload v-if="FileType === 'file'"
    :show-file-list="true"
    :http-request="fnOSSUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :limit="limit"
    :on-exceed="onExceed"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :file-list="fileList"
    :before-upload="beforeAvatarUpload"
    class="upload-demo"
    action=""
  >
    <el-button  size="small" type="primary"<div slot= </el-button"tip" class="el-upload__tip"> Support extension: rar.zip.doc.docx</div> </el-upload> <el-upload v-if="FileType === 'fileDrag'"
    :show-file-list="true"
    :http-request="fnOSSUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :limit="limit"
    :on-exceed="onExceed"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :file-list="fileList"
    :before-upload="beforeAvatarUpload"
    class="upload-demo"
    drag
    action=""
    multiple>
    <i class="el-icon-upload"/>
    <div class="el-upload__text"> Drag the file here, or <em> click upload </em></div> <div slot="tip" class="el-upload__tip"</div> </el-upload> </div> </template> <script>export default {
name: 'Upload',
props: {
  limit: {
    type: Number,
    default: null
  },
  fileName: {
    type: String,
    default: 'file'
  },
  FileTypeList: {
    type: Array, default: () => []}, FileType: {// Determine the type of the file to be uploadedtype: String,
    default: 'file'
  },
  FileTypeErrorText: {
      type: Array,
    default: () => []
  },
  FileLimit:{
     type: Number,
    default: 10
  },
  fileList: {
    type: Array,
    default: () => []
  }
},
data() {
  return {
    flag: true,
    dialogImageUrl: ' ',
    dialogVisible: false,
    formData: new FormData()
  }
},
methods: {
  fnOSSUpload(options) {
    console.log(this.fileName)
    this.formData.append(this.fileName, options.file)
    this.$emit('success', this.formData)
  },
  onSuccess(res, file, fileList) {
  },
  onRemove(file, fileList) {
    this.$emit('remove', file)
    this.flag = true
  },
  onError(err) {
    this.$message.error(err)
  },
  onExceed(files, fileList) {
    if (this.limit) {
      this.$message. Warning (' Currently limits selection${this.limit}File, selected this time${files.length}Three files were selected${files.length + fileList.length}A document `); } }, beforeRemove(file, fileList) {if (this.flag) {
      return this.$confirm(' Confirm removal${file.name}? `) } }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible =true}, beforeAvatarUpload(file) {// Get file name suffix const arr = file.name.split('. ') const STR = arr[arr.length-1] // this.fileTypelist = const STR = arr[arr.length-1] // this.fileTypelist Const isFile = this.fileTypelist. filter(item => item.indexof (STR) > -1).length > 0if(isFile) {// Set the maximum file size in M const isFileLimit = file.size / 1024/1024 < this.filelimitif (isFileLimit) {
        return isFile && isFileLimit
      } else{// If the file size does not match this.$message.warning(`${this.FileTypeErrorText[1]}`)
        this.flag = false
        return isFileLimit
      }
      
    } else{// If the file type does not match, FileTypeErrorText indicates this.$message.warning(`${this.FileTypeErrorText[0]}`)
      this.flag = false
      return isFile
    }
  }
}
}
</script>

Copy the code

conclusion

It doesn’t matter substantial need to tell, directly according to use again ok, the mood is good, the life wants hi, happy smile, tired sleep, the life is not necessarily very cool, but must have attitude very like a word, share to everybody refuels! Ladies and gentlemen,