微信小程序图片预览及上传至后台（JAVA）

技术小白一枚，如有出现错误的地方，还请各位多加指点，也欢迎前来交流。

2、小程序前端

1）WXML文件

<!--pages/user/edit/record_edit/record_edit.wxml-->
<view class="section">
	<picker mode="date" value="{
         
  {date}}" start="2020-05-31" end="2030-05-31" bindchange="bindDateChange">
		<text decode="{
         
  {true}}" class="date">日期&nbsp;:&nbsp;&nbsp;</text>
    <view class="picker" >{
         
  {dates}}</view>
	</picker>
</view>
<view class="textarea">
	<textarea placeholder="发条记录吧~" class="textinput" placeholder-style="color:#888888; font-size:36rpx;" maxlength="-1" bindinput="bingTextAreaBlur" value="{
         
  {detail}}"></textarea>
  <view>
  <image class="del" data-id="{
         
  {itemName.id}}" src="../../../../images/x.png" mode="widthFix" bindtap="delete" wx:if="{
         
  {img}}" ></image>
  <image class="img" src={
         
  {img}} mode="widthFix" wx:if="{
         
  {img}}"></image>
  </view>
  <view><image src="../../../../images/img.png" bindtap="upimg" class="upimg" mode="widthFix"></image></view>
</view>
<view class="big-logos">
</view>
<view id="btn" class="click" bindtap="send">完 成</view>

2）WXSS文件

/* pages/user/edit/record_edit/record_edit.wxss */
page {
  left: 0rpx;
  right: 0rpx;
  height: 100%;
  background-color: #FFD150;
}
.section{
  margin:20rpx;
  padding:20rpx
}
.date{
  font-weight: bold;
  float: left;
}
.picker{
  width: 82%;
  height: 50rpx;
  background-color: white;
  margin-left: 20%;
  text-align: center;
  border-radius: 25rpx;
  font-weight: bold;
}
.img{
  width: 400rpx;
}
.textarea{
  width: 90%;
  background-color: white;
  padding: 2%;
  margin-left: 3%;
  border: 2rpx solid #BBBBBB;
  border-radius: 20rpx;
}
.click{
  width: 94%;
  height: 60rpx;
  line-height: 60rpx;
  /* font-weight: bold; */
  margin-top: 3%;
  background-color: white;
  margin-left: 3%;
  text-align: center;
  border-radius: 20rpx;
}
.textinput{
  min-height: 180rpx;
  height: auto;
}
.upimg{
  width: 70rpx;
  position: relative;
}
.del {
  width: 55rpx;
  height: 55rpx;
  position: absolute;
  left: 52%;
}

3）JS文件

3、后台（JAVA-SpringBoot）

1）图片传入位置

image文件夹是自己创建的，图片将传进image中。

2）接收并上传图片

//如果只是要传图片，仅看addRecord中的下面两行与UploadPictures即可
String fileName = file.getOriginalFilename();
commonService.UploadPictures(file, fileName);

---------------------------------addRecord方法--------------------------------------
@RequestMapping("/uploadImg")
public int addRecord(MultipartFile file, int role, String detail, String timestamp, int id) throws IOException {
        int flag = 0;
        String fileName = file.getOriginalFilename();
        commonService.UploadPictures(file, fileName);
        RecordBean recordBean = new RecordBean(id, role, detail, fileName, timestamp);
        if(id==0){
            if (recordService.addRecord(recordBean) > 0) {
                flag = 1;
            }
        }else{
            if (recordService.updateRecord(recordBean) > 0){
                flag = 1;
            }
        }
        return flag;
    }
    
---------------------------------UploadPictures方法------------------------------------
//将文件写入磁盘
    public void UploadPictures(MultipartFile file, String fileName) throws IOException {
        String filePath = ResourceUtils.getURL("image").getPath()+"/";
        if (!file.isEmpty()) {
            byte[] bytes = file.getBytes();
            BufferedOutputStream bufferedOutputStream = new BufferedOutputStream(new FileOutputStream(new File(filePath + fileName)));
            bufferedOutputStream.write(bytes);
            bufferedOutputStream.close();
        }
    }