微信小程序上传图片到服务端,springboot项目。避免踩坑保姆教程

多方查找终于搞懂了如何去上传文件到本地服务器

前端代码

  <view class="operation_row common_mb0"><view class="upload_btn" bindtap="clickUpload"><image src="../../common/images/icon/icon02.png"></image></view><view class="upload_img" wx:for="{{imagesList}}" wx:key="index"><image class="upload_img_del" src="../../common/images/icon/icon03.png" data-index="{{index}}" bindtap="clickDelImg"></image><image src="{{item.tempFilePath}}"></image></view></view>

在这里插入图片描述

小程序端代码

选择图片

  // 上传图片clickUpload() {const _this = this; wx.chooseMedia({count: 9,mediaType: ['image'],sourceType: ['album', 'camera'],camera: 'back',success(res) {let imagesList = _this.data.imagesListres.tempFiles.forEach(item => {imagesList.push(item)}) _this.setData({imagesList: imagesList})}})},

上传图片

// 便利文件数组 this.data.imagesList.forEach(item =>{wx.uploadFile({url: _fileurl, //开发者服务器的 urlfilePath: item.tempFilePath, // 要上传文件资源的路径 String类型!!!name: 'image', // 文件对应的 key ,(后台用于接收的 key  参看下文 后端 接口的 方法入参 )header: {'content-type': 'multipart/form-data'}, // 设置请求的 headerformData: {wjName:"wjName"}, // HTTP 请求中其他额外的参数success: function (res) {debuggerconsole.log(res);},fail: function (res) {console.log(res);}})})

服务端代码

uploadFileMinIo(String wjName, MultipartFile image)
wjName: 对应formData: {wjName:“wjName”}
image:对应name: ‘image’, // 文件对应的 key

    /*** 上传文件MinIo*/@ApiVersion(value = ApiVersionConsts.API_V1,group = ApiVersionConsts.SWAGGER_API_V1)@RequestMapping("/wxupload")@ApiOperation(value="上传文件", notes="文件相关接口")@PassTokenpublic Result uploadFileMinIo(String wjName, MultipartFile image) throws Exception {// 上传到minio  .  上传到本地 请百度吧,String bucketName = minioProperties.getBucketName();String fileName = minIoUtil.minioUpload(image, image.getOriginalFilename(), bucketName);String url = minIoUtil.getShowUtrl(fileName, bucketName);TWjxx build = TWjxx.builder().filename(fileName).url(url).build();//格式化时间戳SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");String nowTime = sdf.format(new Date().getTime());//取得图片的格式后缀String originalLastName = image.getOriginalFilename();String picLastName = originalLastName.substring(originalLastName.lastIndexOf("."));//拼接:名字+时间戳+后缀String picName = nowTime+"." + wjName + picLastName;return Result.success(build);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/537135.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跨境电商怎么使用动态住宅代理IP?

在数字化时代&#xff0c;隐私保护和信息安全成为全球网民的共同关切。特别是对于海外用户&#xff0c;由于地理位置和网络监管政策的不同&#xff0c;访问全球信息资源变得更加复杂。使用动态住宅IP搭建代理&#xff0c;作为解决这一问题的有效手段&#xff0c;动态IP代理通过…

qiankun:vite/webpack项目配置

相关博文&#xff1a; https://juejin.cn/post/7216536069285429285?searchId202403091501088BACFF113F980BA3B5F3 https://www.bilibili.com/video/BV12T411q7dq/?spm_id_from333.337.search-card.all.click qiankun结构&#xff1a; 主应用base&#xff1a;vue3historyv…

Vue3基础速成

Vue常用语法 {{ }} 变量、表达式渲染 {{ }} 用于输出对象属性和函数返回值 <div id"hello-vue" class"demo">{{ message }} </div><script>const HelloVueApp {data() {return {message: Hello Vue!!}}}Vue.createApp(HelloVueApp).…

Pytorch学习 day13(完整的模型训练步骤)

步骤一&#xff1a;定义神经网络结构 注意&#xff1a;由于一次batch_size的大小为64&#xff0c;表示一次放入64张图片&#xff0c;且Flatten()只会对单张图片的全部通道做拉直操作&#xff0c;也就是不会将batch_size合并&#xff0c;但是一张图片有3个通道&#xff0c;在Ma…

【网络安全】 MSF生成木马教程

本文章仅用于信息安全学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若读者因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与作者无关。 环境准备&#xff1a; 名称系统IP攻击机Kali Linux10.3.0.231客户端Windows 710.3.0.234 一、生…

设计模式-行为型模式-模版方法模式

模板方法模式&#xff0c;定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。[DP] 模板方法模式是通过把不变行为搬移到超类&#xff0c;去除子类中的重复代码来体现它的优势。 //首…

在Linux/Ubuntu/Debian中使用windows应用程序/软件

Wine 是一个兼容层&#xff0c;允许你在类 Unix 操作系统&#xff08;包括 Ubuntu&#xff09;上运行 Windows 应用程序。 以下是在 Ubuntu 上安装和使用 Wine 的基本步骤&#xff1a; 在 Ubuntu 上安装 Wine&#xff1a; 更新软件包列表&#xff1a; 打开终端并运行以下命令以…

搭建项目后台系统基础架构

任务描述 1、了解搭建民航后端框架 2、使用IDEA创建基于SpringBoot、MyBatis、MySQL、Redis的Java项目 3、以原项目为参照搭建项目所涉及到的各个业务和底层服务 4、以原项目为例&#xff0c;具体介绍各个目录情况并参照创建相关文件夹 1、创建项目后端 BigData-KongGuan …

实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数(步骤 + 源码)

导 读 本文主要介绍使用YOLOv9和OpenCV实现车辆跟踪计数&#xff08;步骤 源码&#xff09;。 实现步骤 监控摄像头可以有效地用于各种场景下的车辆计数和交通流量统计。先进的计算机视觉技术&#xff08;例如对象检测和跟踪&#xff09;可应用于监控录像&#xff0c;…

软考高级:需求变更管理过程概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

IMX8MM -- Yocto构建遇见的错误及解决方法:

IMX8MM Yocto构建遇见的错误及解决方法&#xff1a; 1 bison-3.0.4 error2 Opencv BB_NO_NETWORK Error &#xff1a;3 Yocto构建时出现U-boot 问题4 Yocto构建时出现Linux kernel编译问题5 wayland-native6 cross-localedef-native7 wayland-protocols8 mesa 硬件&#xff1a;…

JAVA初阶数据结构栈(工程文件后续会上传)(+专栏数据结构练习是完整版)

1.栈的概念讲解(Stack)&#xff09; 定义&#xff1a;栈是一种先进后出的数据结构 要想拿到12就要把它头上的所有东西给移出去 2.栈的实现&#xff08;代码&#xff09; 2.1栈的方法逻辑的讲解 &#xff08;1&#xff09;新建一个测试类Frank &#xff08;2&#xff09;进…