小程序代码
index.wxml
<view> <button bindtap="upload">点击上传封面</button> </view>
index.js
/上传图片 // 上传照片 upload: function () { //选择图片 wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function (res) { wx.showLoading({ title: '上传中', }) //获取图片临时地址 const filePath = res.tempFilePaths[0] // 自定义云端的图片名称 const fileName = Math.floor(Math.random() * 1000000) + filePath.match(/.[^.]+?$/)[0] console.log(fileName); // 上传到服务器存储空间 var uploadTask=wx.uploadFile({ url: 'http://localhost:8080/imgUpload?fileName='+fileName, header: { "Content-Type": "multipart/form-data" },//类型 filePath: filePath, name: 'file',//和后台接收的参数名字一致 success:(res)=>{ console.log(res.data); wx.showToast({ title: '上传成功' }) }, fail:function(res){ console.log("错误"+res); } }) uploadTask.onProgressUpdate((res)=>{ console.log('上传进度',res.progress); console.log('已经上传的数据长度',res.totalBytesSent); console.log('预期需要上传的数据总长度',res.totalBytesExpectedToSend); } }, fail: e => { console.error(e) }, complete: () => { wx.hideLoading() } }) },
springboot
controller层代码
package com.wx.wdcysh.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; @Controller public class imgUploadController { @ResponseBody @RequestMapping("/imgUpload") public String imgUpload(@RequestParam("file")MultipartFile file, @RequestParam(name = "fileName",required=false) String fileName) throws IOException { //filename是前台传参时的文件名字,也可以不指定 //不指定名字,保存时使用file.getOriginalFilename()得到文件名字; //保存到文件服务器 file.transferTo(new File("E:\\IdeaProjects\\wdcysh\\src\\main\\resources\\static\\file\\"+fileName)); System.out.println("接收到文件"); return "上传文件成功"; } }
比如我设置的文件保存目录为,这是springBoot的静态资源保存位置,设置这个目录话,下载文件的时候,直接指定这个目录下的文件名字,如下载时候的url可指定为,可以不用再写下载文件的控制层了。
http://localhost:8080/file/792928.png
运行报错
将springboot启动类注解改为
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//排除自动配置
可以成功上传,但是访问上传的图片需要重新启动springboot
出现原因
这样导致的原理是服务器的保护措施导致的,服务器不能对外部暴露真实的资源路径,需要配置虚拟路径映射访问
解决办法加配置类
package com.wx.wdcysh.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class webConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { System.out.println("配置文件已经生效"); //关于图片上传后需要重启服务器才能刷新图片 //这是一种保护机制,为了防止绝对路径被看出来,目录结构暴露 //解决方法:将虚拟路径/images/ // 向绝对路径 (E:\IdeaProjects\wdcysh\src\main\resources\static\file\)映射 String path="E:\\IdeaProjects\\wdcysh\\src\\main\\resources\\static\\file\\"; registry.addResourceHandler("/file/**").addResourceLocations("file:"+path); } }
此时上传完即可访问,不用重启动。
小程序图片下载
<block wx:if="{{ isDownload}}"> <image src="{{src}}"></image> </block> <button bindtap="downlaod">文件下载</button>
data: { isDownload:false }, downlaod:function(){ console.log("下载"); var that=this; var downTask=wx.downloadFile({ url: 'http://localhost:8080/file/要下载的文件名字', success:function(res){ if(res.statusCode===200){ let src=res.tempFilePath; that.setData({ src:src, isDownload:true }) } }, fail:function(res){ console.log("下载失败!"+res); } }) downTask.onProgressUpdate((res)=>{ console.log('下载进度',res.progress); console.log('已经下载的总数据长度',res.totalBytesWritten); console.log('预期需要下载的数据长度',res.totalBytesExpectedToWrite); }) },