Vue多个图片同时上传到SpringBoot

Vue多个图片同时上传到SpringBoot

先睹为快

vue页面程序

 

  <div>
    <el-upload
      :multiple="multiple"
      action="/uploadPics"
      list-type="picture-card"
      :auto-upload="false"
      :http-request="uploadFile"
      ref="uploadPic"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
  <div>
    <center>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddSomePicsInfo = false">取 消</el-button>
                <el-button type="primary" @click="addSomePeoplePicsForm">下一步</el-button>
            </span>
    </center>
  </div>

 

  export default {
    data() {
      return {
        formPicsData: "",
        multiple: true,
      }
    },
    methods: {
      uploadFile(file) {
        this.formPicsData.append('file', file.file);
      },
      addSomePeoplePicsForm: function () {
        let self = this;
        this.formPicsData = new FormData();
        this.$refs.uploadPic.submit();
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        //this.$ajax.post这个地方需要在main.js进行简单配置
        this.$ajax.post("/uploadPics", this.formPicsData, config).then(res => {
            //TODO:具体自己逻辑部分
        }).catch(res => {
          this.$message.info("服务器走丢了!");
        });
      },
    }
  }

main.js配置

 

import axios from 'axios'
Vue.prototype.$ajax = axios

SpringBoot接收

 

@ResponseBody
@RequestMapping("/uploadPics")
public void uploadPics(HttpServletRequest request,
                         @RequestParam("file") MultipartFile[] file) {
    if (file != null && file.length > 0) {
        for (MultipartFile temp : file) {
            //将文件先保存下来
            try{
                temp.transferTo(new File(目录路径+ temp.getOriginalFilename()));
                //TODO:自己后续的处理
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乘风御浪云帆之上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值