请问一下上传图片的请求头怎么配置?我们项目请求需要传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平级的。