前端效果图

图片上传演示

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();
    }

}

3 实现思路

步骤一:点击下方按钮

步骤二:选择图片,选中图片后,前端就会调用methods中afterRead(file)函数,最终将图片文件传给http://localhost:8081/api/upload后端接口,后端将图片存储,并返回图片的存储地址给前端。

 步骤三:前端会判断后端的响应,对不同响应做出不同处理,如果成功的话,前端可以拿到图片的存储地址,并将本张图片的后端地址,存储到本地。

res.data.data是图片后端地址

 所有的图片信息会存储在下列数组中,包括图片后端地址。

数组格式如下:

步骤四:点击提交上传后,会遍历flieList数组,将各元素的content(图片地址)的拿出,创建新的数组,将数组传给后端接口。

后端收到前端的请求 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部