在laravel vapor签名存储url中使用Axios默认值

在laravel vapor签名存储url中使用Axios默认值,laravel,vue.js,axios,laravel-vapor,Laravel,Vue.js,Axios,Laravel Vapor,使用Tymon jwt令牌进行身份验证。拉威尔工作得很好 当使用Laravel vapor的上传到S3代码时,我无法获取签名存储url以使用我的axios默认值: axios.defaults.headers.common[“Authorization”]=“Bearer”+令牌 存储方式如单据所示: Vapor.store(this.$refs.file.files[0], { progress: progress => { this.uploadProgress

使用Tymon jwt令牌进行身份验证。拉威尔工作得很好

当使用Laravel vapor的上传到S3代码时,我无法获取签名存储url以使用我的axios默认值:

axios.defaults.headers.common[“Authorization”]=“Bearer”+令牌

存储方式如单据所示:

Vapor.store(this.$refs.file.files[0], {
    progress: progress => {
        this.uploadProgress = Math.round(progress * 100);
    }
}).then(response => {
...
它在npm包的index.js中调用:

async store(file, options = null) {
        // want this to use my default header.
        const response = await axios.post('/vapor/signed-storage-url', {
            'bucket': options.bucket || '',
            'content_type': options.contentType || file.type,
            'expires': options.expires || ''
        });
可能与npm模块不在正确的范围内有关

我已经覆盖了vapor core签名存储url控制器以使用令牌,并且可以让它正常工作,这对Postman没有问题。 它正在调用Vapor.store,它没有将令牌添加到axios调用中,而且我看不到传递头的方法

编辑:您无需注册Vapor即可使用这些软件包

composer require laravel/vapor-core

已解决 因此,为了实现这一点,我将async store方法复制到我的vue组件方法中,并从那里调用它。获取默认标题,但

这导致S3出现axios标头问题,通过执行以下操作可以解决此问题:

async store(file, options = null) {
            const response = await axios.post('/vapor/signed-storage-url', {
                'bucket': options.bucket || '',
                'content_type': options.contentType || file.type,
                'expires': options.expires || ''
            });

            if (typeof options.progress === 'undefined') {
                options.progress = () => {};
            }
// This is the fix for the headers. Instance just for the S3 PUT
            var instance = axios.create();
            instance.defaults.headers.common = {};
            const s3Response = await instance.put(response.data.url, file, {
                headers: response.data.headers,
                onUploadProgress: (progressEvent) => {
                    options.progress(progressEvent.loaded / progressEvent.total);
                }
            });

            response.data.extension = file.name.split('.').pop()

            return response.data;
        },
多亏了

解决了 因此,为了实现这一点,我将async store方法复制到我的vue组件方法中,并从那里调用它。获取默认标题,但

这导致S3出现axios标头问题,通过执行以下操作可以解决此问题:

async store(file, options = null) {
            const response = await axios.post('/vapor/signed-storage-url', {
                'bucket': options.bucket || '',
                'content_type': options.contentType || file.type,
                'expires': options.expires || ''
            });

            if (typeof options.progress === 'undefined') {
                options.progress = () => {};
            }
// This is the fix for the headers. Instance just for the S3 PUT
            var instance = axios.create();
            instance.defaults.headers.common = {};
            const s3Response = await instance.put(response.data.url, file, {
                headers: response.data.headers,
                onUploadProgress: (progressEvent) => {
                    options.progress(progressEvent.loaded / progressEvent.total);
                }
            });

            response.data.extension = file.name.split('.').pop()

            return response.data;
        },

多亏了

为什么这需要经过身份验证的路由呢?@AliGajani所以我的S3存储桶不适用于所有人。只有已登录的用户才能上载图像。您是否必须定义
vapor/signed storage url
或它是预安装的?signed storage url是vapor core的一部分。我需要覆盖它,以便将上传设置为公共阅读。app/overrides/src/Controllers/SignedStorageUrlController.phpVapor-core已更新以设置可见性。是否查看此提交?为什么仍需要在经过身份验证的路由下执行此操作?@AliGajani因此我的S3存储桶不可供所有人使用。只有已登录的用户才能上载图像。您是否必须定义
vapor/signed storage url
或它是预安装的?signed storage url是vapor core的一部分。我需要覆盖它,以便将上传设置为公共阅读。app/overrides/src/Controllers/SignedStorageUrlController.phpVapor-core已更新为设置可见性。请参阅此提交