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

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

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

---

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

实现步骤：

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";
  }
}

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