请问一下上传图片的请求头怎么配置?我们项目请求需要传token

[gy-l]

请问一下上传图片的请求头怎么配置?我们项目请求需要传token，按一般的设置请求头的方法是无效的。 image:{ uploader:{ url:baseURL + "/bms/img_upload", name:"file", // headers:'Bearer ' + token, // 这种无效 headers: (xhr) => { xhr.setRequestHeader('Authorization','Bearer ' + token); }, // 这种也无效 response: (res) => { console.log(res); return res.data }, filter:(res)=> { console.log(res); } } }

[liuhong1happy]

暂不支持自定义header，你需要自定义customUploader

[gy-l]

暂不支持自定义header，你需要自定义customUploader

我自定义了customUploader，并且已经能成功打印出来，但是并没有生效。

customUploader.js如下：

import {getToken} from '@/utils/token';

const token = getToken();

var getError = function getError(options, xhr) { var msg = 'cannot post ' + options.url + ":" + xhr.status; var err = new Error(msg); err.status = xhr.status; err.method = 'post'; err.url = options.url; return err; }; var getBody = function getBody(xhr) { var text = xhr.responseText || xhr.response; if (!text) { return text; }

try {
    return JSON.parse(text);
} catch (e) {
    return text;
}

}; var Uploader = { post: function post(options) { if (typeof XMLHttpRequest === 'undefined') { return; }

    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
        xhr.upload.onprogress = function (e) {
            if (e.total > 0) {
                e.percent = e.loaded / e.total * 100;
            }
            options.onLoad(e);
        };
    }
    var formData = new FormData();

    if (options.data) {
        for (var i in options.data) {
            formData.append(i, options.data[i]);
        }
    }
    formData.append(options.filename, options.file);

    xhr.onerror = function (e) {
        options.onEnd(e);
        options.onError(e);
    };
    xhr.onload = function (e) {
        if (xhr.status !== 200) {
            options.onEnd(e);
            return options.onError(getError(options, xhr), getBody(xhr));
        }
        options.onEnd(e);
        options.onSuccess(getBody(xhr));
    };

    xhr.open('post', options.url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Authorization','Bearer ' + token);
    xhr.send(formData);
}

};

export default{ uploadFile: function uploadFile(options) { options.url = options.url || "/upload"; options.filename = options.filename || "file"; options.beforeUpload = options.beforeUpload || function (e) { return true; }; console.log(token); options.onSuccess = options.onSuccess || function (e) {}; options.onError = options.onError || function (e) {}; options.onLoad = options.onLoad || function (e) {}; options.onStart = options.onStart || function (e) {}; options.onEnd = options.onEnd || function (e) {};

    if (options.beforeUpload(options)) {
        options.onStart(options);
        // 开始上传文件
        Uploader.post(options);
    }
},
uploadFiles: function uploadFiles(options) {}

};

下面是业务页面的调用：

getPlugins = () => {
    let o = {
        image:{
            uploader:{
                url:baseURL + "/bms/img_upload",
                name:"file",
                customUploader: uploadFile,
                filter:(res)=> {
                    console.log(res);
                }
            }
        }
    }
    console.log(o,"fffffff")
    // 这里已经成功打印出来了
    return o;
    // 但这里并无效
}

[liuhong1happy]

customUploader放置在image下边和uploader平级的。