Vue开发前端图片上传给java后端

news2024/9/24 0:45:06

前端效果图

图片上传演示

1 前端代码

<template>
    <div>
      <!-- 页面标题 -->
      <h1 class="page-title">图片上传演示</h1>
      <div class="upload-container">
        <!-- 使用 van-uploader 组件进行文件上传，v-model 绑定 fileList 数据，支持多选文件，afterRead 属性指定读取文件后的回调函数 -->
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      </div>
      <button class="submit-button" @click="submitUpload">提交上传</button>
    </div>
  </template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      // 存储上传文件列表
      fileList: []
    }
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // 设置文件状态为上传中，并添加提示信息
      file.status = 'uploading'
      file.message = '上传中...'
      const fd = new FormData()
      // 将文件添加到 FormData 对象中，准备上传
      fd.append('file', file.file)
      axios
        .post('http://localhost:8081/api/upload', fd, {
          headers: {
            // 设置请求头为 multipart/form-data，用于文件上传
            'Content-Type': 'multipart/form-data'
          }
        })
        .then((res) => {
          console.log(res.data.code)
          // 判断服务器返回的状态码，如果为 200 表示上传成功
          if (res.data.code === 200) {
            file.status = 'done'
            file.message = '上传成功'
            file.content = res.data.data
          } else {
            file.status = 'failed'
            file.message = '上传失败'
          }
        })
        .catch((error) => {
          console.error(error)
        })
    },
    submitUpload () {
      // 遍历数组返回新数组
      const imgs = this.fileList.map(item => item.content)

      // 可以在这里添加提交上传的逻辑，比如确认所有文件上传状态等
      axios.post('http://localhost:8081/api/submit', JSON.stringify({ imgs }),
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      ).then((res) => {
        console.log(res.data)
      }).catch((error) => {
        console.error(error)
      })
    }
  }
}
</script>

  <style scoped lang="less">
  h1 {
    text-align: center;
  }
  .page-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .upload-container {
    border: 2px dashed #999;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .submit-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  </style>

这是基于vue脚手架开发的，用于将本地的图片上传至服务器，并在上传过程中展示预览图。

注意：van-uploader标签是vant的一个组件，不会使用可以参考下列链接：vant

2 后端代码

@RestController
@CrossOrigin("*")
@RequestMapping("/api")
public class FileController {

    @PostMapping("/upload")
    public Result upload(MultipartFile  file){
         
       
        //file是前端传给后端的文件，文件可以保存到阿里云的oss、linux文件夹等都可以，这里由你们自己实现...,最终会得到一个图片url
        
        // 假设图片保存的地址
        String url="https://img2.baidu.com/it/u=446981511,947966320&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1727197200&t=3fc1e64aa5ec768a5bf721d5f131d60f";
        return Result.success(url);
    }
    
    
    @PostMapping("/submit")
    public Result add(@RequestBody ImagesDTO images) throws Exception{
        for (String img : images.getImgs()) {
            System.out.println(img);
        }
        return Result.success();
    }

}