小程序开发笔记（三）：SSM框架实现微信小程序的图片上传

最新推荐文章于 2024-01-27 18:53:32 发布

healerwen

最新推荐文章于 2024-01-27 18:53:32 发布

阅读量1.3k

点赞数 4

分类专栏： SSM框架小程序学习

本文链接：https://blog.csdn.net/healerwen/article/details/104969797

版权

本文探讨了在微信小程序中使用SSM框架实现图片上传的两种策略：即时上传和编辑后上传。即时上传可能导致废弃图片，而编辑后上传可能影响用户体验。详细介绍了editor.js中的处理和Java后台的实现，包括所需jar包和Spring MVC配置。

摘要由CSDN通过智能技术生成

微信富文本编辑器editor的插入图片功能，可查看开发文档的EditorContext.insertImage(Object object)方法。

插入的图片地址为临时文件地址，需要将图片上传然后将图片地址替换为实际存储地址。
对于图片上传有两种方案：

1. 在编辑器插入图片成功时，就将图片上传，并返回实际地址进行替换。
优点： 服务器可以在用户编辑期间实现图片上传，用户无需等待图片上传成功，可以进行其他编写操作。
缺点： 用户在编写过程需要替换已插入的图片，这是后台会存在之前的图片，此图片为废弃图片，需要进行删除操作，否则会占用后台资源。因此也增加了对后台的请求。

2. 在用户编写完文章后，获取文章内相关图片的临时地址，再上传至后台，获取实际地址进行替换。
优点： 可以准确定位文章内容图片，不会产生废弃图片，不用实现删除操作。减少和后台交互操作。
缺点： 用户在编辑完成后，需要等待图片上传时间。且微信的wx.uploadFile方法是单图片上传形式，需要集中发送多个请求。若图片较多，网络不佳，会造成用户等待时间过长，影响用户体验。

一、editor.js

data:{
   
    tempimageid: 1,
    imageid: 1,
    image:[
      {
   
        imageid:0,
        imageurl:'null'
      }
    ]
}	
//插入图片
  insertImage() {
   
    const that = this
    //选择图片
    wx.chooseImage({
   
      count: 1,
      success: function (res) {
   
      //调用EditorContext.insertImage(Object object)方法
        that.editorCtx.insertImage({
   
          src: res.tempFilePaths[0],  //插入图片临时文件地址
          data: {
   
             id: that.data.tempimageid, //临时图片id
            // role: ''
          },
          height: '80%',
          width: '80%',
          alt: 'img',
          success: function () {
   
            that.setData({
   
              tempimageid:that.data.tempimageid+1//临时图片id加1
            })
          }
        }),
        //上传图片
        wx.uploadFile({
   
          url: 'http://localhost:8080/zhigj/image/upload.action',//图片上传处理接口
          filePath: res.tempFilePaths[0],
          name:'file',
          formData:{
   
            id: that.data.imageid	//设置图片id,需与临时图片id一致，所以初始化赋值时两个均为0即可
          },
          success: function(res){
     
            that