微信小程序之图片上传之巨坑

写这个随笔的目的是想让遇到这个坑的人少点时间去填坑

先附上小程序前端和java端代码

startUpload: function(){
wx.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.uploadFile({
url: 'http://localhost:8080/upload/fileUpload' , //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: "file",
header: {
"Content-Type": "multipart/form-data"
},
formData: {
"user": "test",
},
success: function (res) {
var data = res.data
console.log(data)
//do something
}
})
}

java后端代码：

package com.contoller;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.tool.FileUtil;
@RestController
@RequestMapping("/upload")
public class UploadFileContoller {
private static final Logger LOG = LoggerFactory
.getLogger(UploadFileContoller.class);
@PostMapping("/fileUpload")
public String uploadMusicFile(HttpServletRequest request,@RequestParam("file")MultipartFile[] files){
LOG.info("进入上传...");
String uploadPath="E:/pic/";//存放到本地路径（示例）
if(files!=null && files.length>=1) {
BufferedOutputStream bw = null;
try {
String fileName = files[0].getOriginalFilename();
//判断是否有文件
if(StringUtils.isNoneBlank(fileName)) {
//输出到本地路径
File outFile = new File(uploadPath + UUID.randomUUID().toString()+ FileUtil.getFileType(fileName)); LOG.info("path=="+uploadPath + UUID.randomUUID().toString()+ FileUtil.getFileType(fileName)); FileUtils.copyInputStreamToFile(files[0].getInputStream(), outFile); } } catch (Exception e) { e.printStackTrace(); } finally { try { if(bw!=null) {bw.close();} } catch (IOException e) { e.printStackTrace(); } } }return "success";}}

public static String getFileType(String filename){
if(filename.endsWith(".jpg") || filename.endsWith(".jepg")){
return ".jpg";
}else if(filename.endsWith(".png") || filename.endsWith(".PNG")){
return ".png";
} else{
return "application/octet-stream";
}
}

代码中标红色的这个地址，注意，如果在本地调试的时候是绝对不能访问的，一定是要线上的地址，也就是服务器的地址。比如你本地的地址为192.168.0.1 后面的参数就不写了，那你这边就要把这个地址改为服务器地址，然后把整个程序打包部署到服务器上，

前端访问服务器的地址，才能上传成功。

参考网址：https://blog.csdn.net/time512/article/details/80241629

转载于:https://www.cnblogs.com/jpc123/p/9072213.html

微信小程序之图片上传之巨坑相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决图片上传一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
微信小程序实现图片上传（清晰版）
在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 <view><button bindtap="chooseImage">选择图片< ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...

微信小程序之图片上传之巨坑

微信小程序之图片上传之巨坑相关推荐

最新文章

热门文章