小程序文件上传

小程序处理文件上传

这里使用有赞组件处理文件上传，文档参照：https://vant-contrib.gitee.io/vant-weapp/#/uploader

html

<van-uploader max-count="1" bind:after-read="afterRead" use-before-read bind:before-read="beforeRead">
                <view class="info-row-auto margin-l10">
                    <view class="du-tit">微信卡包会员招募二维码LOGO</view>
                    <view class="info-inner">
                        <view class="info-row-l60">
                            <view class="du-btn">修改</view>
                        </view>
                        <view class="info-row-auto margin-l70">
                            <view class="du-txt">图片要求小于10M，格式为jpeg、jpg、png。</view>
                        </view>
                    </view>
                </view>
            </van-uploader>

js

 //图片上传前期校验
    beforeRead(event) {
        const {
            file,
            callback
        } = event.detail;
        let flag = file.type === 'image';
        let size = file.size;
        console.log(size);
        if (size > 10240000) {
            that.toast.showToast('上传图片尺寸不能大于10M!');
            return;
        }
        callback(flag);
    },
    afterRead(event) {
        //图片上传
        let that = this;
        const {
            file
        } = event.detail;
        if (file.size >= 10240000) {
            that.toast.showToast('图片不能大于10M');
            return;
        }
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        dataMainModule.getUploadFile(file, function (res) {
            // console.log(res);
            // 上传完成需要更新 fileList
            if (res.retCode == 200) {
                if (res.retData) {
                    var list = [];
                    if (res.retData.length > 0) {
                        res.retData.forEach(function (item, index) {
                            var obj = {
                                ...file,
                                url: common.getViewImageUrl(item.fileReturnId),
                            }
                            list.push(obj);
                        })
                    }
                    // console.log(list)
                    that.setData({
                        fileList: list,
                        imgList: res.retData,
                    });
                    //再进行实际的图片修改
                    that.updateShopLogo(res.retData[0].fileReturnId);
                }
            }
        }, function (res) {
            that.toast.showToast(res);
        })
    },

请求

//接口
getUploadFile: function (params, callback, errback) {
    //文件上传
    utilHttps.requestUploadFile(urlConfig.official, "/gy/official/fileUpload", params, callback, errback);
  },

/**
   * 文件上传，访问ajax，post方法请求-json格式传参
   * @param domainUrl  接口名称
   * @param params  接口请求参数：{}
   * @param callback  接口请求成功回调
   * @param errback  接口请求失败回调
   * @returns {string}
   */
  requestUploadFile: function (serverUrl, domainUrl, file, callback, errback) {
    var fileUrl = serverUrl + '' + domainUrl;
    wx.uploadFile({
      url: fileUrl, // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        utilHttps.getResultData(res, function (ress) {
          callback(ress);
        }, function (ress) {
          if (errback) {
            errback(ress);
          } else {
            utilHttps.getToast(ress.msg);
          }
        });
      },
      fail(res) {
        utilHttps.getToast('服务器繁忙，请稍后重试！');
        if (errback) {
          errback(res);
        }
      },
    });
  },

效果