微信小程序图片上传代码如下,springboot后台,files为参数名,count 为最多上传图片个数:
Page({
data: {
hasMore: false,
clientHeight: 0,
// 图片布局列表(二维数组,由`albumList`计算而得)
layoutList: [],
// 布局列数
layoutColumnSize: 3,
// 是否显示loading
showLoading: false,
// loading提示语
loadingMessage: '',
// 是否显示toast
showToast: false,
// 提示消息
toastMessage: '',
// 是否显示动作命令
showActionsSheet: false,
// 当前操作的图片
imageInAction: '',
// 图片预览模式
previewMode: false,
// 当前预览索引
previewIndex: 0,
images_upload: '../resources/images/camera.png',
},
/* 函数描述:作为上传文件时递归上传的函数体体;
* 参数描述:
* filePaths是文件路径数组
* successUp是成功上传的个数
* failUp是上传失败的个数
* i是文件路径数组的指标
* length是文件路径数组的长度
*/
uploadDIY(filePaths, successUp, failUp, i, length) {
console.log(filePaths)
wx.uploadFile({
url: 'http://192.168.1.103/zjkj/product/uploadFile',
filePath: filePaths[i],
name: 'files',
success: (resp) => {
successUp++;
},
fail: (res) => {
failUp++;
},
complete: () => {
i++;
if (i == length) {
console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败!');
}
else { //递归调用uploadDIY函数
this.uploadDIY(filePaths, successUp, failUp, i, length);
}
},
});
},
uploadImage: function (e) {
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
var successUp = 0; //成功个数
var failUp = 0; //失败个数
var length = res.tempFilePaths.length; //总共个数
var i = 0; //第几个
console.log(res.tempFilePaths);
this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
},
});
}
})
springboot后台接收:
/**
* 图片上传
* @throws Exception
*/
@PostMapping("/uploadFile")
@ResponseBody
public AjaxResult uploadFile(@RequestParam( value="files",required=false)MultipartFile file) {
String path;
try {
path = FileUploadUtils.upload(Global.getProdImgsPath(),file);
} catch (IOException e) {
e.printStackTrace();
return error("上传失败,请联系管理员!");
}
return success(serverConfig.getUrl() +path);
}
/**
* 根据文件路径上传
*
* @param baseDir 相对应用的基目录
* @param file 上传的文件
* @return 文件名称
* @throws IOException
*/
public static final String upload(String baseDir, MultipartFile file) throws IOException
{
try
{
return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
}
catch (Exception e)
{
throw new IOException(e.getMessage(), e);
}
}
/**
* 文件上传
*
* @param baseDir 相对应用的基目录
* @param file 上传的文件
* @param extension 上传文件类型
* @return 返回上传成功的文件名
* @throws FileSizeLimitExceededException 如果超出最大大小
* @throws FileNameLengthLimitExceededException 文件名太长
* @throws IOException 比如读写文件出错时
* @throws InvalidExtensionException 文件校验异常
*/
public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
InvalidExtensionException
{
int fileNamelength = file.getOriginalFilename().length();
if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
{
throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
}
assertAllowed(file, allowedExtension);
String fileName = extractFilename(file);
File desc = getAbsoluteFile(baseDir, fileName);
file.transferTo(desc);
String pathFileName = getPathFileName(baseDir, fileName);
return pathFileName;
}