How to upload files using vue2 upload component

Parameter attributes of upload component

action	Required parameter, upload address	string	—	—
headers	Set upload request headers	object	—	—
multiple	Whether to support multiple selection of files	boolean	—	—
data	Additional parameters included when uploading	object	—	—
name	Uploaded file field name	string	—	file
with-credentials	Support sending cookie credential information	boolean	—	false
show-file-list	Whether to display the uploaded file list	boolean	—	true
drag	Whether to enable drag and drop upload	boolean	—	false
accept	Accept uploaded file types (this parameter is invalid in thumbnail-mode mode)	string	—	—
on-preview	Hook when clicking an uploaded file in the file list	function(file)	—	—
on-remove	Hook for removing files from file list	function(file, fileList)	—	—
on-success	Hook when file upload is successful	function(response, file, fileList)	—	—
on-error	Hook when file upload fails	function(err, file, fileList)	—	—
on-progress	File upload hook	function(event, file, fileList)	—	—
on-change	The hook when the file status changes, will be called when adding a file, uploading successfully or uploading fails.	function(file, fileList)	—	—
before-upload	The hook before uploading the file. The parameter is the uploaded file. If it returns false or returns a Promise and is rejected, the upload will stop.	function(file)	—	—
before-remove	The hook before deleting the file. The parameters are the uploaded file and the file list. If it returns false or returns a Promise and is rejected, the deletion will stop.	function(file, fileList)	—	—
list-type	File list type	string	text/picture/picture-card	text
auto-upload	Whether to upload files immediately after selecting them	boolean	—	true
file-list	Uploaded file list, for example: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
http-request	Override the default upload behavior and customize the upload implementation	function	—	—
disabled	Whether to disable	boolean	—	false
limit	Maximum number of uploads allowed	number	—	—
on-exceed	Hook when the number of files exceeds the limit	function(files, fileList)	—	-

The only ones commonly used are the following:

multiple: Whether to support multiple selection of files,

show-file-list: Whether to display the uploaded file list,

drag: Whether to enable drag and drop upload,

accept: Accept the uploaded file type (this parameter is invalid in thumbnail-mode mode),

on-preview: hook when clicking on an uploaded file in the file list (viewing the file),

on-remove: hook when removing files from the file list (deleting files),

on-success: hook when file upload is successful,

on-progress: hook when uploading files,

before-upload: used to check files,

list-type: the type of file list,

auto-upload: Whether to choose to upload files immediately. Generally, the default is to upload files immediately.

file-list: file list, used to display uploaded files, useful for echoing files or pictures later (with a fixed format),

http-request: Custom upload, which will override the default action upload. It is the most commonly used.

limit: the maximum format allowed for uploading

Upload component method

method name	illustrate	parameter
clearFiles	Clear the uploaded file list (this method does not support calling in before-upload)	—
abort	Cancel upload request	(file: file object in fileList)
submit	Manually upload file list	—

clearFiles: most commonly used

Code: (component)

<template>
  <div>
    <el-upload ref="upload" :file-list="imgList" action="#" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :http-request="handleFileUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="onChange" :before-upload="handleBeforeUpload">
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 点击图片查看大图 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
//
import { videoApi } from '@/api/video.js'
// 上传文件的基路径前缀，上传文件的接口会返回一个路径，用来和https://yztest.zjrcq.cn/eyeValleyImg拼接
import { baseUrl } from '@/utils/pictureUrl'
export default {
  name: '',
  props: {
    // 图片列表，用来实现回显，列表格式必须为[{ name: 'placard.jpeg', url: 'https://......' }]
    imgList: {
      default: '',
      type: Array
    }
  },
  data() {
    return {
      // 点击查看图片的路径
      dialogImageUrl: '',
      dialogVisible: false,
      // 文件列表
      fileList: [],
      // 上传的数据
      initForm: {
        id: '',
        picPath: '',
        removed: false
      },
      showBtnDealImg: true,
      noneBtnImg: false,
      limitCountImg: 1 // 上传图片的最大数量
    }
  },

  mounted() {},
  methods: {
    // 上传海报图
    handleFileUpload(fileObject) {
      videoApi.uploadImg(fileObject.file).then(res => {
        const { msg, result } = res
        if (result == 1) {
          // 将图片地址拼接传给父组件
          this.$emit('placardUpload', baseUrl + msg)
        } else {
          this.$message.warning(msg)
        }
      })
    },
    // 清空文件列表的方法，供父组件使用
    clearFiles() {
      this.$refs.upload.clearFiles()
    },
    // 移除
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.$emit('placardUpload', fileList.join(''))
    },
    // 查看大图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 检查图片
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.warning('上传图片不能大于2M')
      }
      return true
    },
    onChange(file, fileList) {}
  }
}
</script>

<style lang="scss">
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
</style>

Used in the .vue file used

<el-form-item label="海报图">
        <placardUpload ref="placardUpload" :img-list="placardFileList" @placardUpload="placardUpload" />
</el-form-item>

placardFileList: In order to realize the function of image echoing 

placardUpload: Receive data from subcomponents