elementUI一次上传多张图片

  • Post author:
  • Post category:其他


<template>
  <div>
    <el-card style="margin: 10px">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:9002/cosservice/cos/imgs"
        multiple
        :limit="4"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
      </el-upload>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: "index",
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    submitUpload() {
      let {uploadFiles, action, data} = this.$refs.upload
      const formData = new FormData()
      uploadFiles.map(file => {
        formData.append("files",file.raw)
      })
      request({
        url: action,
        method: 'post',
        data: formData
      })
    },
    handleRemove(file, fileList) {
      console.log(fileList)
    },
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>

<style scoped>

</style>

后端

	@ApiOperation(value = "上传多张图片")
    @PostMapping( value = "/imgs")
    @ApiImplicitParams(@ApiImplicitParam(name = "files",paramType = "formData",value = "图片",required = true,dataType = "file",allowMultiple=true))
    public BaseResult uploadImgs(MultipartFile[] files){
        System.out.println(files.length);
        List<String> list = cosService.uploadImgs(files);
        return BaseResult.success().data("imgsUrl",list);
    }



版权声明:本文为qq_40945081原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。