伤寒杂病

1：使用FormData数据做图片上传： new FormData()
ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到
正确的打开方式：formdata.append('file', file)
错误的打开方式：formData.set(name,value)
//html代码
<div class="sendImage" slot="label">
              <input type="file" name="file" accept="image/*" ref="ndImgUpload"
                     class="upload_input" @change="imgSelectChange">
            </div>

//javascript代码

  const UPLOAD_IMG_SIZE = 10          //图片上传大小不能大于10M
  const IMG_NEED_COMPRESS_SIZE = 0.5  //图片大小<=0.5M,则不压缩，直接上传
  const SELECT_IMG_QUANTITY = 9       //发送消息图片最多选9张


vue代码
methods:{
 imgSelectChange (e) {
        this.$vux.loading.show({
          text: 'Loading'
        })

        let file = e.target

        setTimeout(() => { //加500ms定时器是为了防止大质量图片上传会造成卡顿loading会延迟执行
          this.sendImgIndex = 0

          if (file.files.length > SELECT_IMG_QUANTITY) {
            this.$vux.loading.hide()
            return this.$vux.alert.show({
              title: '提示',
              content: '最多选9张图片',
              onHide () {
                file.value = ''
              }
            })
          }

          for (let obj of Array.from(file.files)) {

            if (!/\/(?:jpeg|png|gif|jpg)/i.test(obj.type)) {
              this.$vux.loading.hide()
              return this.$vux.alert.show({
                title: '提示',
                content: `${obj.name}不是图片文件类型`,
                onHide () {
                  file.value = ''
                }
              })
            }

            let calcSize = obj.size / 1024 / 1024
            if (calcSize > UPLOAD_IMG_SIZE) {
              this.$vux.loading.hide()
              return this.$vux.alert.show({
                title: '提示',
                content: `图片大小不能大于${UPLOAD_IMG_SIZE}M`,
                onHide () {
                  file.value = ''
                }
              })
            }

          }

          const imgLen = file.files.length
          this.eachSendImg(file.files, file, (data) => {

            //msgType 0系统 1文字 2图片 3音频 4视频 5回撤
            this.sendMsgHandle(2, data, () => {
              this.sendImgIndex === imgLen && this.$vux.loading.hide()
            }, () => {
              this.sendImgIndex === imgLen && this.$vux.loading.hide()
              this.$vux.alert.show({
                title: '提示',
                content: `图片${file.files[this.sendImgIndex - 1].name}发送消息失败`
              });
            })

          }, (err) => {

          })
        }, 500)
      },
 eachSendImg (files, input, success, error) {
        if (!files.length) return
        let that = this
        let args = arguments

        that.sendImg(files[that.sendImgIndex]).then(data => {
          success(data)
          that.sendImgIndex++
          files[that.sendImgIndex] ? that.eachSendImg.apply(that, args) : input.value = ''

        }).catch(err => {
          that.$vux.loading.hide()

          let txt_tip = err.msg === 'FILE_WRONG_SIZE' ? `图片${files[that.sendImgIndex].name}文件过大，上传失败`
            : `图片${files[that.sendImgIndex].name}上传失败`;

          that.$vux.alert.show({
            title: '提示',
            content: txt_tip,
            onHide () {
              error(err)
              that.sendImgIndex++

              if (files[that.sendImgIndex]) {
                that.$vux.loading.show({
                  text: 'Loading'
                })
                that.eachSendImg.apply(that, args)
              } else {
                input.value = ''
              }

            }
          })

        })

      },
 sendImg (file) {

        let formdata = new FormData(); // FormData 对象
        let that = this

        return new Promise((resolve, reject) => {

          if (file.size / 1024 / 1024 <= IMG_NEED_COMPRESS_SIZE) {

            formdata.append('file', file)
            that.sendImgAjax(formdata).then((res) => {
              resolve(res)
            }).catch((err) => {
              reject(err)
            })
            return;
          }

          let reader = new FileReader();
          reader.onload = function () {
            let result = this.result;
            let img = new Image();
            img.src = result;

            //   图片加载完毕之后进行压缩，然后上传
            if (img.complete) {
              let data = compress(img);

              let blob = convertBase64UrlToBlob(data);
              formdata.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
              that.sendImgAjax(formdata).then((res) => {
                resolve(res)
              }).catch((err) => {
                reject(err)
              })

              img = null;
            } else {
              img.onload = () => {
                let data = compress(img);

                let blob = convertBase64UrlToBlob(data);
                formdata.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
                that.sendImgAjax(formdata).then((res) => {
                  resolve(res)
                }).catch((err) => {
                  reject(err)
                })

                img = null;
              };
            }

          }
          reader.readAsDataURL(file);
        })
      },
 sendImgAjax (formData) {
        return new Promise((resolve, reject) => {
          getData.common.form_uploadImg({
            data: formData,
            sucCb (data) {
              resolve(data)
            },
            failCb (err) {
              reject(err)
            }
          })
        })
      },
 sendMsgHandle (type, msg, success, error) {//发送消息
        if (!this.inputVal.trim() && !msg) return this.$vux.toast.text('消息内容不能为空');
        this.disabled = true

        this.$vux.loading.show({
          text: 'Loading'
        })

        if (this.query.groupId) {
          let that = this
          getData.doctor.group_chat_send_msg({
            params: {
              gid: that.query.groupId,
              //msg{1 || 0} :如果是图片上传，数据转为字符串,包含宽高url,msgType
              msg: msg ? JSON.stringify(msg) : that.inputVal,
              type //msgType 0系统 1文字 2图片 3音频 4视频 5回撤
            },
            sucCb (data) {
              msg && (data.msg = JSON.parse(data.msg)) //如果是图片上传，msg消息数据为对象转的字符串
              that.data.push({
                chatid: data.uid,
                from: data.uid,
                content: msg ? data.msg.url : data.msg,
                width: msg ? data.msg.width : 0,
                height: msg ? data.msg.height : 0,
                create_time: data.date,
                avatar: data.pic,
                name: data.nick,
                group_id: data.gid,
                msg_id: data.id,
                msg_type: data.type
              })

              that.addPrevTimeData()
              that.setLocalData(that.query.groupId, that.data.slice(-1))

              type !== 2 && that.$vux.loading.hide()
              that.disabled = false
              that.inputVal = ''

              success && success()
            },
            failCb (err) {
              type !== 2 && that.$vux.loading.hide()
              that.disabled = false
              let overtime = err.code * 1 === 0

              if (that.inGoBackError(err.code) || overtime) {
                type === 2 && that.$vux.loading.hide()

                that.$vux.alert.show({
                  title: '提示',
                  content: overtime ? '发送失败，请检查网络' : err.code === 'USER_NOT_IN_GROUP' ? '您已被移出群聊' : err.msg,
                  onHide () {
                    !overtime && that.$router.replace({
                      path: '/spa/msgGroup'
                    })
                  }
                });
              } else if (type === 2) {
                error && error()
              } else {
                that.$vux.loading.hide()
                that.$vux.alert.show({
                  title: '提示',
                  content: '消息发送失败'
                });
              }

            }
          })
        }
      }
    
}
2：better-scroll与wx.previewImage 苹果ios点击冲突bug
3：vue单页面与 wx API调用wx.config设置失败问题
4：使用new Image()获取图片的宽高
5：setTimeout 第二个以外的参数
猜你喜欢
