小程序图片保存服务器,小程序本地上传图片，上传到服务器并保存到本地

概述：实现小程序上传图片到服务器 ，并保存到本地。仅供测试

我是刚开始学习小程序，如有问题请下方评论，跪拜！！！！！

实现效果：效果想要大家都看到 所以有点失真和变形，请谅解

实现步骤：

1：查看官方文档上传图片，下载图片公用API

API：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

2：上代码：

wxml：

发布

wxss：

.tu {

/* border: 3rpx solid rgba(0, 0, 0, 0.329); */

border-radius: 10rpx;

height: 260rpx; width: 260rpx;

margin: 5rpx 5rpx 5rpx 5rpx;

}

.logoinfo {

height: 220rpx;

width: 220rpx;

margin: 10rpx 10rpx 10rpx 10rpx;

}

.tu1 {

display: flex;

flex-flow: row wrap;

align-content: space-around;

}

.an {

height: 90rpx;

width: 270rpx;

font-size: 38rpx;

background-color: rgba(146, 163, 45, 0.288);

font-weight: 600;

color: white;

}

button::after {

border: none;

}

.an1 {

margin-top: 90rpx;

}

js：

const app = getApp()

var form_data;

var psw_vaule = [];

Page({

data: {

tempFilePaths: [],

img_arr: [],

},

//上传图片到服务器

formSubmit: function () {

var that = this

var adds = that.data.img_arr;

for (var i = 0; i < this.data.img_arr.length; i++) {

wx.uploadFile({

url: 'http://localhost:8081/WxMiniapp/goods/upload', //填写实际接口，仅测试

filePath: that.data.img_arr[i],

name: 'content',

formData: {

'user': adds

},

success: function (res) {

console.log(res)

if (res) {

wx.showToast({

title: '已提交发布！',

duration: 3000

});

}

}

})

}

// this.setData({

// formdata: ''

// })

},

//从本地获取照片

upimg: function () {

var that = this;

if (this.data.img_arr.length < 9) {

wx.chooseImage({

count: 9, //一次性上传到小程序的数量

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success(res) {

console.log(res)

const tempFilePaths = res.tempFilePaths

console.log(res.tempFilePaths)

//concat() 方法用于连接两个或多个数组

that.setData({

img_arr: that.data.img_arr.concat(res.tempFilePaths),

})

}

})

} else {

wx.showToast({

title: '最多上传九张图片',

icon: 'loading',

duration: 2000

})

}

},

//删除照片功能与预览照片功能

deleteImg: function (e) {

var that = this;

var img_arr = that.data.img_arr;

var index = e.currentTarget.dataset.index;

wx.showModal({

title: '提示',

content: '确定要删除此图片吗？',

success: function (res) {

if (res.confirm) {

console.log('点击确定了');

img_arr.splice(index, 1);

} else if (res.cancel) {

console.log('点击取消了');

return false;

}

that.setData({

img_arr: img_arr

});

}

})

},

//预览图片

previewImg: function (e) {

var index = e.currentTarget.dataset.index;

var img_arr = this.data.img_arr;

wx.previewImage({

current: img_arr[index],

urls: img_arr

})

},

})

后台代码：ssh框架实现

package com.mtx.controller;

import org.apache.log4j.Logger;

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 javax.servlet.http.HttpServletRequest;

import java.io.File;

import java.io.IOException;

/**

* 小程序上传图片处理类,保存到本地

*/

@Controller

@RequestMapping(value="/goods")

public class GoodsController {

private Logger logger = Logger.getLogger(GoodsController.class);

/**

*

* @param request

* @param file

* @return 上传成功返回“success”，上传失败返回“error”

*

*/

/**

* 小程序上传多张图片处理类,保存到本地

*/

@ResponseBody

@RequestMapping("/upload")

public String upload(HttpServletRequest request, MultipartFile content) throws IOException {

System.out.println("执行upload");

request.setCharacterEncoding("UTF-8");

logger.info("执行图片上传");

String user = request.getParameter("user");

logger.info("user:"+user);

if(!content.isEmpty()) {

logger.info("成功获取照片");

String fileName = content.getOriginalFilename();

String path = null;

String type = null;

type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;

logger.info("图片初始名称为：" + fileName + " 类型为：" + type);

if (type != null) {

if ("GIF".equals(type.toUpperCase())||"PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {

// 保存路径

String realPath = "F:/";

// 自定义的文件名称

String trueFileName = fileName;

// 设置存放图片文件的路径

path = realPath + "uploads/" + trueFileName;

logger.info("存放图片文件的路径:" + path);

content.transferTo(new File(path));

logger.info("文件成功上传到指定目录下");

}else {

logger.info("不是我们想要的文件类型,请按要求重新上传");

return "error";

}

}else {

logger.info("文件类型为空");

return "error";

}

}else {

logger.info("没有找到相对应的文件");

return "error";

}

return "success";

}

}

删除图片效果：长按图片即可删除