微信小程序uploader上传文件并提交表单数据并在订单详情中显示图片和预览图片

时间:2024-03-07 09:24:34

背景

公司客户要求在订单中添加文件上传功能,就开始查阅资料之旅了,微信小程序扩展能力中有现成的文件上传组件uploader可以使用,而这个项目是在表单中添加上传图片功能,因此需要考虑一些代码逻辑。

  • 首先,刚开始忽略了逻辑问题,直接在上传文件的时候通过接口提交到后台,接着遭到了质疑:“如果用户没提交表单,上传的图片就已经到后台了,有点不合逻辑吧”

  • 然后,重新整理逻辑,先把图片临时缓存一下,提交表单的时候,拿到缓存数据,通过接口把图片提交到后台,再把表单数据提交到后台(两个接口是分开的,后台给的,就这样用呗)

uploader简介

uploader是微信小程序WeUI组件库中的一个图片上传的组件,可以在小程序开发文档中--扩展能力--表单组件中找到相关用法。

这是一个集合了图片选择、上传、预览、删除的完整组件,属性定义也比较全面,可以自定义上传个数,有上传成功提醒和失败提醒,点击预览功能等,基本可以涵盖图片文件上传的所有功能要求。

用起来也很方便,在json文件中加入以下引用(可在官方文档找到),然后在wxml文件中直接引入该组件就行,使用起来很方便

{
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

官方文档提供了简单的使用案例,如图所示

4.png

附上官方地址:

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/uploader.html

官方提供的这部分代码里面其实只需要补充uplaodFile上传方法调用后台上传图片的接口,上传功能就可以使用了,这算是一个可用的完整demo。实际使用起来,还是需要完善一下,废话不多说,直接上代码~

用法与代码

1.在json文件中引入组件
"usingComponents": {
    "mp-uploader": "../../weui/uploader/uploader",
  }
2.在wxml文件中引入

6.png

暂时只需要上传一张图片,设置max-count等于1即可

9.png

文字版:

 <view class="upload bg1 w90 box-shadow1 mar-ao p10 mar-tp10">
      <view class="message w100 p10 bor-bottom " style="color:#444">上传附件</view>
      <view class="page__bd" style="padding:0 10px;">
        <mp-uploader binddelete="deleteFile" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}"
          upload="{{uplaodFile}}" files="{{files}}" max-count="1" title=""></mp-uploader>
          <!--  max-size="{{5*1024}}"  -->
      </view> 
3.在js文件中写对应方法

添加官方demo的内容,并修改对应方法,直接贴图:

8.png

修改uplaodFile方法,调用resolve({urls})方法设置上传成功状态,保存临时文件目录tempFilePaths,后面提交后台时再来拿数据

7.png

上传文件的实现,后面表单提交时调用

10.png

表单提交部分,先将上传的图片提交到后台,再把表单数据提交

5.png

文字版:

//------------------附件上传开始------------------------
  chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
          tempFilePaths = res.tempFilePaths;
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          that.setData({
            files: that.data.files.concat(res.tempFilePaths)
          });
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
        current: e.currentTarget.id, // 当前显示图片的http链接
        urls: this.data.files // 需要预览的图片http链接列表
    })
  },
selectFile(files) {
    uploadArr = [];
    uploadIndex = 0;
    for(var i=0;i<files.tempFilePaths.length;i++){
        uploadArr.push(files.tempFilePaths[i])
    }
    console.log(uploadArr,\'9999999\')
    // uploadArr = files.tempFilePaths
    // 返回false可以阻止某次文件上传
  },
  // 缓存文件
  uplaodFile(files) {
    console.log(\'upload files\', files);
    var that = this;
    // 文件上传的函数,返回一个promise
    return new Promise((resolve, reject) => {
      const tempFilePaths = files.tempFilePaths;
      that.setData(
        {
          filesUrl: tempFilePaths
        }
      )
      var object = {};
      object[\'urls\'] = tempFilePaths;
      resolve(object);
    })
  },
//上传单个文件
    uploadFile(url, filePath) {
      return new Promise((resolve, reject) => {
        wx.uploadFile({
          url: url, //仅为示例,非真实的接口地址
          filePath:filePath,
          name: \'file\',
          // formData: param,
          success (res){ //上传成功
            console.log(res)
            //成功调用接口
            resolve(JSON.parse(res.data));
          },
          fail(err){
            console.log(err)
            wx.showToast({ title: \'请求失败,请刷新后重试\', icon: \'none\' });
            reject(err)
          }
        })
      })
    },
  uploadError(e) {
      console.log(\'upload error\', e.detail)
  },
  uploadSuccess(e) {
      console.log(\'upload success\', e.detail)
  },



  formSubmit:function() {
    let uploadUrl = \'你的后台接口\'
    let filePath = uploadArr[uploadIndex]
    this.uploadFile(uploadUrl,filePath).then((res) => {  //上图图片并保存表单
      if (res.Code == "Success") {
        wx.showToast({
          title: \'添加成功\'
        });
        wx.navigateBack({  //返回上一页
          delta: 1,
        })
      }
    })
    wx:wx.request({
      url: \'你的后台接口\',
      method: "POST",
      data: that.data.form,
      header: {
        \'Content-Type\': \'application/json\'
      },
      success: (res) => {
        console.log(res);
        if (res.data.code == \'200\') {
          wx.setStorageSync(\'detailsList\', []);
          that.setData({pinLeiListData:[]});
          Toast({
            type: \'success\',
            message: \'提交成功\',
            onClose: () => {
              wx.reLaunch({
                url: "/pages/index/index",
              })
            },
          });

        }else if(res.data.code == \'400\'){
          Toast({
            type: \'fail\',
            message: res.data.message,
            duration:4000
          });
        }
      },
    })
  },
欢迎留言指正!