美文网首页
小程序 mp-uploader 采用 arraybuffer

小程序 mp-uploader 采用 arraybuffer

作者: aaagu1234 | 来源:发表于2022-12-27 16:14 被阅读0次

    核心代码:

    index.wxml

      <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>
               
    

    index.js

    chooseImage: function (e) {
            var that = this;
            wx.chooseMedia({
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表,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) {
            console.log('files', files)
            // 返回false可以阻止某次文件上传
        },
        uplaodFile(files) {
            let arrayBuffer = files.contents[0];
            let str = '';
            const chunk = 8 * 1024;
            let i;
            for (i = 0; i < arrayBuffer.byteLength / chunk; i++) {
              str += String.fromCharCode(...new Uint8Array(arrayBuffer.slice(i * chunk, (i + 1) * chunk)));
            }
            str += String.fromCharCode(...new Uint8Array(arrayBuffer.slice(i * chunk)));
            let base64 = `data:image/jpeg;base64,${btoa(str)}`;
             
            // 文件上传的函数,返回一个promise
            return new Promise((resolve, reject) => {
               
                wx.request({
                    url: 'http://xxxxxx/insertPic',
                    method: 'POST',
                    data: {
                        pic: base64
                    },
                    header: {
                        "Content-Type": "application/json"
                    },
                    success: (res) => {
                        if (res.data.code == 200 ) {
                            resolve();
                       
                        }
                    },
                    fail: (res) => {
        
                    }
                })
            })
        },
        uploadError(e) {
            console.log('upload error', e.detail)
        },
        uploadSuccess(e) {
            console.log('upload success', e.detail)
        },
    
    

    base64.js

    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
      a256 = '',
      r64 = [256],
      r256 = [256],
      i = 0;
    
    var UTF8 = {
    
      /**
       * Encode multi-byte Unicode string into utf-8 multiple single-byte characters
       * (BMP / basic multilingual plane only)
       *
       * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars
       *
       * @param {String} strUni Unicode string to be encoded as UTF-8
       * @returns {String} encoded string
       */
      encode: function (strUni) {
        // use regular expressions & String.replace callback function for better efficiency
        // than procedural approaches
        var strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz
          function (c) {
            var cc = c.charCodeAt(0);
            return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
          })
          .replace(/[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz
            function (c) {
              var cc = c.charCodeAt(0);
              return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3F, 0x80 | cc & 0x3f);
            });
        return strUtf;
      },
    
      /**
       * Decode utf-8 encoded string back into multi-byte Unicode characters
       *
       * @param {String} strUtf UTF-8 string to be decoded back to Unicode
       * @returns {String} decoded string
       */
      decode: function (strUtf) {
        // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!
        var strUni = strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars
          function (c) { // (note parentheses for precence)
            var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f);
            return String.fromCharCode(cc);
          })
          .replace(/[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars
            function (c) { // (note parentheses for precence)
              var cc = (c.charCodeAt(0) & 0x1f) << 6 | c.charCodeAt(1) & 0x3f;
              return String.fromCharCode(cc);
            });
        return strUni;
      }
    };
    
    while (i < 256) {
      var c = String.fromCharCode(i);
      a256 += c;
      r256[i] = i;
      r64[i] = b64.indexOf(c);
      ++i;
    }
    
    function code(s, discard, alpha, beta, w1, w2) {
      s = String(s);
      var buffer = 0,
        i = 0,
        length = s.length,
        result = '',
        bitsInBuffer = 0;
    
      while (i < length) {
        var c = s.charCodeAt(i);
        c = c < 256 ? alpha[c] : -1;
    
        buffer = (buffer << w1) + c;
        bitsInBuffer += w1;
    
        while (bitsInBuffer >= w2) {
          bitsInBuffer -= w2;
          var tmp = buffer >> bitsInBuffer;
          result += beta.charAt(tmp);
          buffer ^= tmp << bitsInBuffer;
        }
        ++i;
      }
      if (!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));
      return result;
    }
    
    var Plugin = function (dir, input, encode) {
      return input ? Plugin[dir](input, encode) : dir ? null : this;
    };
    
    Plugin.btoa = Plugin.encode = function (plain, utf8encode) {
      plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain;
      plain = code(plain, false, r256, b64, 8, 6);
      return plain + '===='.slice((plain.length % 4) || 4);
    };
    
    Plugin.atob = Plugin.decode = function (coded, utf8decode) {
      coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, "");
      coded = String(coded).split('=');
      var i = coded.length;
      do {
        --i;
        coded[i] = code(coded[i], true, r64, a256, 6, 8);
      } while (i > 0);
      coded = coded.join('');
      return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded;
    };
    module.exports = {
      btoa: Plugin.btoa,
      atob: Plugin.atob
    }
    

    相关文章

      网友评论

          本文标题:小程序 mp-uploader 采用 arraybuffer

          本文链接:https://www.haomeiwen.com/subject/hnmnqdtx.html