vue+element ui 图片上传

代码实现：先在本地上传预览，点击保存按钮后将图片文件上传至后台服务器

<template>
  <div>
    <el-upload
      action="/upload"
      :on-change="uploadFile"
      :before-remove="removeFile"
      accept=".jpg,.jpeg,.png*"
      multiple
      :show-file-list="true"
      :file-list="fileList"
      list-type="picture"
      :auto-upload="false"
    >
      <el-button>+ 上传附件</el-button>
    </el-upload>
    <el-button @click="save">保存</el-button>
  </div>
</template>

<script>
import { uploadImg } from '@/api/upload'
export default {
  name: 'upload',
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 附件上传
    uploadFile (file, fileList) {
      const isJPG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        fileList.splice(-1, 1)
        this.$message.error('附件只能为JPG/PNG格式！')
        return
      }
      if (!isLt2M) {
        fileList.splice(-1, 1)
        this.$message.error('附件大小不能超过2MB！')
        return
      }
      this.fileList.push({ url: file.url, file: file })
    },
    // 移除附件
    removeFile (file, fileList) {
      this.fileList = fileList
    },
    // 保存附件
    save () {
      let formData = new FormData()
      this.fileList.forEach((item) => {
        formData.append('files', item.file.raw)
      })
      uploadImg(formData).then(res => {

      }).catch(e => {
        this.$message.error(`error:${e.message}`)
      })
    }
  }
}
</script>

发送请求

import request from './index'

export function uploadImg (formData) {
  const result = request({
    url: '/upload/uploadImg',
    method: 'post',
    data: formData
  })
  return result
}

后台控制层接收请求

@PostMapping("/uploadImg")
public void uploadImg(@RequestPart(value = "files", required = false) MultipartFile[] files) {
    System.out.println(files);
}