关于`web-uploader`在vue中使用的一些问题及建议

[941477276]

最近在一个简单项目需要使用前端上传控件，不想自己造轮子，于是找到了这个很好用的web-uploader，看了下源码，作者写的是真的非常好。在实际项目使用中也遇到了一些问题，通过修改源码的方式解决了，同时我把这些问题也记录了下来，希望作者能完善下。

1、上传后服务器端出错时出现代码报错

上传服务器出错时会报： Unexpected token < in JSON at position 0 错误
原因：当dataType=json时后端返回的数据并不是json数据，而代码中并没有对请求状态做判断就直接去解析了
解决：Q.Uploader.js第894行改造

//完成上传
complete: function (task, state, responseText) {
    var self = this;

    if (!task && self.workerThread == 1) task = self._lastTask;

    if (task) {
        if (state != undefined) task.state = state;

        if (task.state == UPLOAD_STATE_PROCESSING || state == UPLOAD_STATE_COMPLETE) {
            task.state = UPLOAD_STATE_COMPLETE;
            self.progress(task, task.size, task.size);
        }

        /************************************改造代码 start************************************/
        // 错误状态码
        var errorState = {
            400: 1, 401: 1,
            402: 1, 403: 1,
            404: 1,
            500: 1, 503: 1
        };
        // 非上传错误才能去解析
        if(task.xhr && !(task.xhr.status in errorState)){
            if (responseText !== undefined) self._process_response(task, responseText);
        }
    }
    /************************************改造代码 end************************************/
    self.run("update", task, "update").run("over", task, "over");

    if (state == UPLOAD_STATE_CANCEL) self.fire("cancel", task);
    self.fire("complete", task);

    self.workerIdle++;
    if (self.started) self.start();

    return self;
}

2、上传回调事件希望能改成/支持调用函数形式

如：

let uploader = new Q.Uploader({
  url:"api/upload.ashx",
  target: this.$refs.uploadBtn,    //上传按钮,可为数组
});
uploader.on('select', function () {
  console.log('select 事件')
});
uploader.on('beforeUpload', function () {
  console.log('beforeUpload 事件')
});

3、前端粘贴上传支持不是很好

如果要使用默认图片预览，并且图片是粘贴上传的，则在Q.Uploader.UI.Image.js文件的第33行会出问题，因为前端获取到的粘贴板上的图片一般为base64数据，此时已经可以预览，而不再需要转换。
我的解决方案：传递一个自定义对象过去，如下修改即可解决

//生成图片预览地址(html5)
function readAsURL(file, callback) {
    /**************************改造代码 start**************************/
    if(typeof file.input === 'undefined' && ({}).toString.call(file) != '[object File]'){
        callback();
        return;
    }
    /**************************改造代码 end**************************/
    var URL = window.URL || window.webkitURL;
    if (URL) return callback(URL.createObjectURL(file));

    if (window.FileReader) {
        var fr = new FileReader();
        fr.onload = function (e) {
            callback(e.target.result);
        };
        fr.readAsDataURL(file);
    } else if (file.readAsDataURL) {
        callback(file.readAsDataURL());
    }
}

4、上传出错时没有error事件

问题：上传服务器端出错时没有error事件，目前是统一走的complete事件

5、没有destroy方法

问题：在单页面中使用web-uploader时，无法销毁uploader，因为uploader没有destroy方法

6、文件上传成功后一直存储着

问题：一个文件上传成功后它依然存储在uploader实例中，这在单页面网站中很占内存，希望可以提供一种上传成功将文件销毁的机制

[devin87]

谢谢反馈，最近比较忙，等有空了再好好整下。