uniapp上传图片Provisional headers are shown的问题？

Question

我用的uniapp中的uview想弄一个上传图片的功能

前端上传图片的代码：

uploadFilePromise(url) {            return new Promise((resolve, reject) => {                let a = uni.uploadFile({                    url: 'http://localhost:8000/api/Ajax/uploadx', // 仅为示例，非真实的接口地址                    filePath: url,                    method:'post',                    header:{                        'Content-Type':'multipart/form-data'                    },                    name: 'file',                    formData: {                        user: 'test'                    },                    success: (res) => {                        resolve(res.data.data)                    },                    fail:(res)=>{                        reject(res)                    }                });            })        },

后端用的buildadmin：

public function uploadx()    {        $file = $this->request->file('file');        $userId= $this->request->post('user_id');        try {            $upload     = new Upload($file);            $attachment = $upload->upload(null, 0, intval($userId));            unset($attachment['create_time'], $attachment['quote']);        } catch (Throwable $e) {            $this->error($e->getMessage());        }        $this->success(__('File uploaded successfully'), [            'file' => $attachment ?? []        ]);    }

最后提示：Provisional headers are shown没有任何返回信息，但这接口在apifox里测试是没有问题的。

其中线索：上传时有这两个请求，有下面的提示。

Answer 1

因为我用的buildadmin后端框架，测试时需要在header里传server=1

Answer 2

从你提供的信息来看，问题可能出在前端上传图片的代码中。

首先，你应该确保 'Content-Type' 设置为 'multipart/form-data' 是正确的，这是上传文件时必需的。然而，根据你的后端代码，你似乎在前端代码中没有正确设置这个头部。

其次，你应该注意 'Content-Disposition' 头部。当使用 'multipart/form-data' 来上传文件时，这个头部是非常重要的。它通常设置为 'form-data'，这样服务端就知道这是一个文件上传请求。在你的前端代码中，你应该添加这个头部。

因此，你的前端代码可能应该像这样：

uploadFilePromise(url) { return new Promise((resolve, reject) => { uni.uploadFile({ url: 'http://localhost:8000/api/Ajax/uploadx', // 仅为示例，非真实的接口地址 filePath: url, method:'post', header:{ 'Content-Type':'multipart/form-data', 'Content-Disposition': 'form-data' // 添加这一行 }, name: 'file', formData: { user: 'test' }, success: (res) => { resolve(res.data.data) }, fail:(res)=>{ reject(res) } }); });},

这应该解决你的问题。如果问题仍然存在，那么问题可能出在你的后端代码中。你可能需要检查后端代码以确保你正确处理了文件上传请求。