上传图片

Element-ui显示上传图片，SpringBoot接收处理图片

Element-ui上传单个或多个文件

1、element-ui上传单个图片，首先上传到服务器，返回链接，再显示前端

<template>
  <div id="upload"> 
    <el-upload
          class="avatar-uploader"
          action="http://localhost:8088/headImage"
          name="file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          >
          <img v-if="imageUrl" :src="imageUrl" id="avatar" />
          <i v-else id="avatar-uploader-icon" class="el-icon-plus"></i>
    </el-upload>

  </div>
</template>

<script>
export default {
    data() {
        return {
            imageUrl: '',
            newFile: new FormData,
            imageList:'',
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log(res)
            this.imageUrl = URL.createObjectURL(file.raw);
            this.imageList = res.msg;
            alert(this.imageList);
        },
        beforeAvatarUpload(file) {
            const fileType = file.name.substring(file.name.lastIndexOf('.'))
            if (fileType.toLowerCase() != '.jpeg' && fileType.toLowerCase() != '.jpg') {
                this.$message.error('文件必须为.jpeg或.jpg类型')
                this.fileList = []
                return false
            }
            this.newFile.append('file',file)
        },
    },


}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
#avatar {
  width: 148px;
  height: 148px;
  display: inline-block;
  
}
</style>

2、上传图片，前端只显示不上传，点击上传按钮后传至后端，上传多个图片，将:limit=1改成想要上传图片的个数

<template>
  <div id="upload"> 
    <el-upload
        action="#"
        list-type="picture-card"
        name="file"
        :on-remove="handleRemove"
        :on-change="PicturePreview"
        :auto-upload="false"
        :limit=1
        :on-exceed="handleChange"
        >
        <i class="el-icon-plus" id="avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="primary" @click="submit()" plain>确认上传</el-button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            newFile: new FormData,
        }
    },
    methods: {
        submit(){
            this.axios({
                url: 'http://localhost:8088/headImage',
                method: 'post',
                data: this.newFile,
                headers:{'Content-Type':'multipart/form-data'}
            })
            .then(res => {
                console.log(res)
            }).catch(err =>{
                console.log(err)
            })
        },
        PicturePreview(file,fileList){
            const fileType = file.name.substring(file.name.lastIndexOf('.'))
            if (fileType.toLowerCase() != '.jpeg' && fileType.toLowerCase() != '.jpg') {
                this.$message.error('文件必须为.jpeg或.jpg类型,请删除重新选择正确格式')
                this.dialogImageUrl = '';
                return false
            }else{
                var url = null;
                if(window.createObjectURL != undefined){
                    url = window.createObjectURL(file.raw);
                }else if(window.URL != undefined){
                    url = window.URL.createObjectURL(file.raw)
                }else if(window.webkitURL != undefined){
                    url = window.webkitURL.createObjectURL(file.raw);
                }
                this.dialogImageUrl = url;
                this.newFile.append("file",file.raw);
            }
            
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleChange(file, fileList) {
            alert("只能上传一张头像");
        },
    },


}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
#avatar {
  width: 148px;
  height: 148px;
  display: inline-block;
  
}
</style>

SpringBoot接收单个和多个文件

1、后端接收单个图片

public void image(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        System.out.println("图片名称" + multipartFile.getOriginalFilename());
        String newName = System.currentTimeMillis() + "." + multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".")+1);
        System.out.println("图片新名称" + newName);
        String path = "D:\\java\\abc\\src\\main\\resources\\";
        File dest = new File(path + newName);
        if (!dest.getParentFile().exists()){
            dest.getParentFile().mkdirs();
        }
        try {
            multipartFile.transferTo(dest);
            return RestfulCode.returnImageName(newName);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        }
    }

2、后端接收多个图片

public void image(@RequestPart("files") MultipartFile[] multipartFileList, @RequestParam("file") MultipartFile multipartFile){
    for (MultipartFile files:multipartFileList){
        System.out.println(files.getOriginalFilename());
    }
}

3、后端同时接收多个和单个文件

public void image(@RequestPart("file") MultipartFile[] multipartFileList){
    // 遍历输出传入文件组中的文件名
    for (MultipartFile files:multipartFileList){
        System.out.println(files.getOriginalFilename());
    }
    // 输出传入单个文件的文件名
    System.out.println(multipartFile.getOriginalFilename());
}