当前位置: 首页 > article >正文

uniapp springboot 上传demo

前端

<template>
	<view class="container">
	    <button type="primary" @click="chooseVideo">选择视频</button>
	    <video v-if="localUrl" :src="localUrl" controls></video>
		<view style="margin-bottom: 40rpx;"></view>
	    <button type="warn" @click="uploadVideo" :disabled="!localUrl">上传视频</button>
	  </view>
</template>

<script>
export default {
  data() {
    return {
      localUrl: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        success: (res) => {
          this.localUrl = res.tempFilePath;
        }
      });
    },
    uploadVideo() {
      if (!this.localUrl) {
        uni.showToast({
          title: '请先选择视频',
          icon: 'none'
        });
        return;
      }
      uni.uploadFile({
        url: 'http://127.0.0.1:9035/web/sms/test02', // 替换为你的服务器地址
        filePath: this.localUrl,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadRes) => {
          console.log('上传成功', uploadRes.data);
          uni.showToast({
            title: '上传成功'
          });
        },
        fail: (err) => {
          console.error('上传失败', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>

后端

private static final String UPLOAD_DIR = "d:/logs/uploads/";

@SneakyThrows
@PostMapping("/test02")
public ResponseEntity<String> test02(@RequestParam("file") MultipartFile file) {
    if (file.isEmpty()) {
        return ResponseEntity.badRequest().body("Please select a file to upload.");
    }


        // Create the uploads directory if it doesn't exist
        File uploadDir = new File(UPLOAD_DIR);
        if (!uploadDir.exists()) {
            uploadDir.mkdirs();
        }

        // Save the file on the server
        byte[] bytes = file.getBytes();
        Path path = Paths.get(UPLOAD_DIR + file.getOriginalFilename());
        Files.write(path, bytes);

        return ResponseEntity.ok("You successfully uploaded " + file.getOriginalFilename() + "!");

}

http://www.kler.cn/a/443103.html

相关文章:

  • 实训云上搭建集群
  • cache原理
  • 预训练语言模型——BERT
  • Postman接口测试05|实战项目笔记
  • Linux:深入了解fd文件描述符
  • Elasticsearch—索引库操作(增删查改)
  • 【深入STL:C++容器与算法】深度解析string类的使用
  • MyBatis 常见面试问题深度剖析
  • 讯飞智文丨一键生成WordPPT
  • 深度学习的下一站:解锁人工智能的新边界
  • 渗透测试之信息收集
  • Windows设置所有软件默认以管理员身份运行
  • ElasticSearch中的深度分页问题
  • 用vscode,进行vue开发
  • 对象克隆与单例模式
  • 抓取到的1688商品数据如何用于市场分析?
  • wazuh-modules-sca-scan
  • 安装MetaMask钱包、创建新钱包、切换到以太坊主网、进行钱包充值以及转出以太资产
  • 一个开源的自托管虚拟浏览器项目,支持在安全、私密的环境中使用浏览器
  • 自动呼入机器人如何与人工客服进行无缝切换?
  • windows C#-本地函数
  • Java系统对接企业微信审批项目流程
  • jmeter连接mysql
  • fastAPI接口的请求与响应——基础
  • ArkTs组件的学习
  • Vue 2 中页面跳转方式的详细介绍