微信小程序——多张图片上传(uploadFile) Java后台

首先是前端js的代码:

Page({

  data: {
  },

  //选择并上传图片--Max:9张
  selectImage: function () {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],

      success: function (res) {
        //将图片路径循环赋值给filePath参数
        for (var i = 0; i < res.tempFilePaths.length; i++) {

          var imgUrl = res.tempFilePaths[i];

          wx.uploadFile({
            //上传图片的网路请求地址
            url: 'http://localhost:8080//upload/uploadPic',
            //选择
            filePath: imgUrl,
            name: 'file',

            success: function (res) {
              console.log("success");
            },

            fail: function (res) {
              console.log("error");
            }
          });

        }//for循环结束

      }
    });

    console.log("****正在添加图片*****");

  },


})

然后是Java后台,注释应该比较清楚了,就不再解释了:

@Controller
public class uploadPicture {
    @RequestMapping(value = "/upload/uploadPic", method = {RequestMethod.POST, RequestMethod.GET})
    public ModelAndView uploadPicture(HttpServletRequest request, HttpServletResponse response) throws IOException {

        MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;

        //对应前端的upload的name参数"file"
        MultipartFile multipartFile = req.getFile("file");

        //realPath填写电脑文件夹路径
        String realPath = "C:\\Users\\Admin\\Pictures\\WeChatPic";

        //格式化时间戳
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
        String nowTime = sdf.format(new Date().getTime());

        //裁剪用户id
        String originalFirstName = multipartFile.getOriginalFilename();
        String picFirstName = originalFirstName.substring(0, originalFirstName.indexOf("."));

        //取得图片的格式后缀
        String originalLastName = multipartFile.getOriginalFilename();
        String picLastName = originalLastName.substring(originalLastName.lastIndexOf("."));

        //拼接:名字+时间戳+后缀
        String picName = picFirstName + "." + nowTime + picLastName;
        try {
            File dir = new File(realPath);
            //如果文件目录不存在,创建文件目录
            if (!dir.exists()) {
                dir.mkdir();
                System.out.println("创建文件目录成功:" + realPath);
            }
            File file = new File(realPath, picName);
            multipartFile.transferTo(file);
            System.out.println("添加图片成功!");
        } catch (IOException e) {
            e.printStackTrace();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        }
        return null;
    }
}

小程序端选择了文件:

后端操作完成后,相应路径也能看到文件成功上传:

成功实现了小程序上传图片的功能。

 

 

### 微信小程序中实现作业批改功能的技术方案 #### 1. 技术架构概述 微信小程序中的作业批改功能可以通过前后端分离的方式来实现。前端主要负责展示和交互逻辑,而后端则处理数据存储、业务逻辑以及文件上传下载等功能[^1]。 - **前端部分**:采用微信小程序框架开发,利用其内置的API完成表单提交、图片/文档上传、实时消息通知等功能。 - **后端部分**:可以选择PHP或Java作为服务器端语言。如果选用PHP,则可借助Laravel或其他成熟框架快速搭建接口;如果是Java,则推荐使用Spring Boot来构建RESTful API[^3]。 #### 2. 数据库设计 数据库的设计需支持多种类型的字段以满足不同场景下的需求: | 字段名 | 类型 | 描述 | |--------------|--------------|--------------------------| | id | INT | 主键 | | student_id | VARCHAR(50) | 学生唯一标识符 | | teacher_id | VARCHAR(50) | 教师唯一标识符 | | assignment_name | VARCHAR(255)| 作业名称 | | submission_date | DATETIME | 提交时间 | | grade | FLOAT | 批改分数 | | feedback | TEXT | 老师评语 | 此结构允许记录每次作业的相关信息并保存教师给出的成绩与意见[^4]。 #### 3. 前端页面布局 以下是用于显示待批改列表的一个简单样例代码片段: ```html <view class="container"> <block wx:for="{{assignments}}" wx:key="id"> <view> <text>{{item.studentName}} 的 {{item.assignmentName}}</text> <!-- 查看详情按钮 --> <button bindtap="showDetail">查看详情</button> </view> </block> </view> ``` 当点击“查看详情”时,跳转至另一个页面加载具体的作业内容供评分之用。 #### 4. 文件上传与查看 考虑到某些情况下可能需要上传附件形式的作品(如PDF报告),因此必须集成云储存解决方案或者自建FTP服务接收这些大容量的数据流。下面是一段关于如何调用微信提供的`wx.uploadFile()`方法的例子: ```javascript function uploadAssignment(filePath){ return new Promise((resolve,reject)=>{ wx.uploadFile({ url:'https://yourserver.com/api/upload', // 后台地址 filePath, name:'file', success(res){ resolve(JSON.parse(res.data)); }, fail(err){ reject(err); } }); }) } ``` 上述函数封装了异步请求流程以便于后续操作[^2]。 #### 5. 安全性和权限控制 确保只有授权人员才能访问敏感资料至关重要。为此建议实施OAuth认证机制验证身份合法性,并且依据角色分配相应的动作许可范围——比如仅限授课导师有权修改特定班级成员的成绩条目等等。 --- ###
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值