搭建小程序端

用vant组件

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead"  deletable="{{ true }}" />

vant官网写的好像有点问题(自接用会报错)

    data: {deletable: false,fileList: [],},afterRead(event) {var that = this;const { file } = event.detail;// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式wx.uploadFile({url: 'http://test:9001/upload', // 仅为示例，非真实的接口地址filePath: file.url,name: 'file',formData: { user: 'test' },success(res) {// 上传完成需要更新 fileListconst { fileList = [] } = that.data;fileList.push({file, url: res.data });that.setData({ fileList });},});},

前端就搭建完成了

配置tomcat

因为你要预览效果需要从服务器上读取图片,可以通过tomcat读取到

在conf/service.xml里面

他是通过tomcat去拿的 要开 tomcat

<Context docBase ="/home/lyb/image" path ="/pictures" debug ="0" reloadable ="true"/>
（个人理解）注：
docBase 是读取哪里的（就是你图片放哪个文件夹下了）
path 是。。就相当于加上这个就会去docBase下面找图片
到时候你上传的图片连接就是 ：http://ip地址:tomcat端口号/pictures/HuzueU53whR8b72af3e3f793035279a804ac9d219d47.png

后端接收并保存

1.写个springboot项目

2.打包

3.发服务器上

4.启动起来

package com.hkd.controller;import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.UUID;@Controller
public class FileUploadController {@Value("${filePath}")  //这里可以直接写 保存的路径   filePath: /home/lyb/image 要把图片保存的位置private String UPLOAD_FOLDER ;@PostMapping("upload")@ResponseBodypublic Object fileUpload(@RequestParam("file")MultipartFile srcFile, RedirectAttributes redirectAttributes) {String newFileName = "";String fileName="";if(srcFile.isEmpty()) {redirectAttributes.addFlashAttribute("message", "请选择一个文件");return "失败";}try {File destFile = new File(UPLOAD_FOLDER);if(!destFile.exists()) {destFile = new File("");}System.out.println("file path:"+destFile.getAbsolutePath());SimpleDateFormat sf_ = new SimpleDateFormat("yyyyMMddHHmmss");File upload = new File(destFile.getAbsolutePath());if(!upload.exists()) {upload.mkdirs();}System.out.println("完整的上传路径："+upload.getAbsolutePath()+"/"+srcFile);byte[] bytes = srcFile.getBytes();Path path = Paths.get(upload.getAbsolutePath()+"/"+srcFile.getOriginalFilename());Files.write(path, bytes);String uuid = UUID.randomUUID().toString().replaceAll("-", "");fileName = srcFile.getOriginalFilename();String suffixName = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();newFileName = uuid + "."+ suffixName;redirectAttributes.addFlashAttribute("message", "文件上传成功"+newFileName);} catch (IOException e) {e.printStackTrace();}return "http://你的ip:tomcat的端口号/pictures/"+fileName;}
}

微信小程序文件上传前后端相关推荐

微信小程序文件上传file
微信小程序上传文件: wx.uploadFile({ //上传 name: 'file', php后台接收: move_uploaded_file($_FILES['file'][ ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序实现上传视频功能（后端代码是java）
微信小程序实现上传视频功能(后端代码是java) 1.前端 wxml文件 <image bindtap="uploadVideo" length="3" ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序录音上传功能
微信小程序录音上传录音弹窗wxml代码:  <view class="cui-record" hidden="{{isHid ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序：上传的图片显示旋转问题
问题? 开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关. 小程序的页面实用webview渲染的,webvie ...

微信小程序文件上传前后端

搭建小程序端

用vant组件

配置tomcat

后端接收并保存

微信小程序文件上传前后端相关推荐

最新文章

热门文章

微信小程序文件上传 前后端

搭建小程序端

用vant组件

配置tomcat

后端接收并保存

微信小程序文件上传 前后端相关推荐

最新文章

热门文章

微信小程序文件上传前后端

微信小程序文件上传前后端相关推荐