微信官方weUI.js uploader如何实现图片上传保存服务器文件内？

Question

做一个前端传后台的一个操作；WEUI.js 的uploader 能否随from表单一起提交到后台？ 后台$_FILES 接收不了文件信息

/**
 * uploader 上传组件
 * @param {string} selector 上传组件的selector
 * @param {object} options 配置项
 * @param {string} [options.url] 上传的url，返回值需要使用json格式
 * @param {boolean} [options.auto=true] 设置为`true`后，不需要手动调用上传，有文件选择即开始上传。用this.upload()来上传，详情请看example
 * @param {string} [options.type=file] 上传类型, `file`为文件上传; `base64`为以base64上传
 * @param {string=} [options.fileVal=file] 文件上传域的name
 * @param {object=} [options.compress] 压缩配置, `false`则不压缩
 * @param {number=} [options.compress.width=1600] 图片的最大宽度
 * @param {number=} [options.compress.height=1600] 图片的最大高度
 * @param {number=} [options.compress.quality=.8] 压缩质量, 取值范围 0 ~ 1
 * @param {function=} [options.onBeforeQueued] 文件添加前的回调，return false则不添加
 * @param {function=} [options.onQueued] 文件添加成功的回调
 * @param {function=} [options.onBeforeSend] 文件上传前调用，具体参数看example
 * @param {function=} [options.onSuccess] 上传成功的回调
 * @param {function=} [options.onProgress] 上传进度的回调
 * @param {function=} [options.onError] 上传失败的回调
 *
 * @example
 */
   var uploadCount = 0;
   var uploadCustomFileList = [];
    weui.uploader('#uploaderCustom', {
       auto: false,
       type: 'file',
       fileVal: 'customize_img',
       compress: {
           width: 1600,
           height: 1600,
           quality: 1
       },
       onBeforeQueued: function(files) {
           // `this` 是轮询到的文件, `files` 是所有文件
   
           if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
               weui.alert('请上传图片');
               return false; // 阻止文件添加
           }
           if(this.size > 10 * 1024 * 1024){
               weui.alert('请上传不超过10M的图片');
               return false;
           }
           if (files.length > 5) { // 防止一下子选择过多文件
               weui.alert('最多只能上传1张图片，请重新选择');
               return false;
           }
           if (uploadCount + 1 > 2) {
               weui.alert('最多只能上传1张图片');
               return false;
           }
   
           ++uploadCount;
   
           // return true; // 阻止默认行为，不插入预览图的框架
       },
       onQueued: function (){
            console.log(this);
               uploadCustomFileList.push(this);
           // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
           // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64
   
           // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
           // this.stop(); // 中断上传
   
           // return true; // 阻止默认行为，不显示预览图的图像
       },
       onBeforeSend: function(data, headers){
           console.log(this, data, headers);
           // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
           // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
   
           // return false; // 阻止文件上传
       },
       onProgress: function(procent){
           console.log(this, procent);
           // return true; // 阻止默认行为，不使用默认的进度显示
       },
       onSuccess: function (ret) {
           console.log(this, ret);
           // return true; // 阻止默认行为，不使用默认的成功态
       },
       onError: function(err){
           console.log(this, err);
           // return true; // 阻止默认行为，不使用默认的失败态
       }
    });
// 手动上传按钮
document.getElementById("uploaderCustomBtn").addEventListener('click', function () {
    uploadCustomFileList.forEach(function (file) {
        file.upload();
    });
});

// 缩略图预览
document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) {
    var target = e.target;

    while (!target.classList.contains('weui-uploader__file') && target) {
        target = target.parentNode;
    }
    if (!target) return;

    var url = target.getAttribute('style') || '';
    var id = target.getAttribute('data-id');

    if (url) {
        url = url.match(/url\((.*?)\)/)[1];
    }
    var gallery = weui.gallery(url, {
        onDelete: function onDelete() {
            weui.confirm('确定删除该图片？', function () {
                var index;
                for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
                    var file = uploadCustomFileList[i];
                    if (file.id == id) {
                        index = i;
                        break;
                    }
                }
                if (index) uploadCustomFileList.splice(index, 1);

                target.remove();
                uploadCount = uploadCount-1;
                gallery.hide();
            });
        }
    });
});

Answer 1

同问啊，兄弟，你最后是怎么解决的啊

解决了兄弟，weui uploader支持转成base64格式的，我append到隐藏的input里面，然后随表单一起提交了