微信小程序+springboot+mybatis 前端图片随表单一起上传以及获取服务器图片的方法

cc858

已于 2022-09-23 17:06:27 修改

阅读量1.3k

点赞数 1

文章标签：微信小程序前端服务器

于 2022-09-19 17:43:32 首次发布

本文链接：https://blog.csdn.net/weixin_43616676/article/details/126937953

版权

小程序前端

初步实现上传图片

任务目标为，在微信小程序前端实现图片上传和预览功能，能单独删除已上传的图片。正常情况下，这一任务需要两步完成。

设置参数，使用wx.uploadFile向文件服务器/云储存上传图片；上传成功后服务器返回图片保存的路径/URL
将返回的路径/URL放入表单中提交
也就说，每一张图片的添加和删除，都需要调用一次后端接口，给后端的压力较大。现改为前端图片的上传和删除只在前端发生，将需要上传的图片地址保存在前端数组中，“上传”和“删除”变成单纯对字符串数组的操作，在最后上传表单内容时，将存储图片的数组一同上传即可。

data: {
   
      

    links_type:'',
    cameraList:[],
    imgList: [],//存储图片临时地址
    uploadcurrent: 0,
    uploadImgList: [],//存储图片成功上传后，后端返回的服务器上图片存储位置
    

    },
//关于调用视频和图片
 // 点击添加选择
  chooseSource: function () {
   
    var _this = this;
    wx.showActionSheet({
   
      itemList: ["拍照", "从相册中选择"],
      itemColor: "#000000",
      success: function (res) {
   
        if (!res.cancel) {
   
          if (res.tapIndex == 0) {
   
            _this.imgWShow("camera") //拍照
          } else if (res.tapIndex == 1) {
   
            _this.imgWShow("album") //相册
          }
        }
      }
    })
  },
   
  // 点击调用手机相册/拍照
  imgWShow: function (type) {
   
    var _this = this;
    let len = 0;
    if (_this.data.imgList != null) {
   
      len = _this.data.imgList.length
    }
    wx.chooseImage({
   
      count: 10 - len,
      sizeType: ['original', 'compressed'], 
      sourceType: [type],
      success: function (res) {
   
        wx.showToast({
   
          title: '正在上传...',
          icon: "loading",
          mask: true,
          duration: 1000
        })
        var imgList = res.tempFilePaths
        let tempFilePathsImg = _this.data.imgList
        var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
         
           _this.setData({
   
          imgList: tempFilePathsImgs //将图片的临时地址存储到全局变量imgList中
        })
        //,()=>_this.uploadimagFile() 本来是在这个地方执行上传后端操作的
      },
      fail: function () {
   
        wx.showToast({
   
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },
    // 预览图片
    previewImg: