uniapp中post请求,传递form-data类型数据问题

问题描述:

在使用uniapp开发前段项目时,不论使用axios请求,还是uniapp内置的请求方法,在post请求,且content-type:form-data,传递表单数据时,发现未自动生成Boundary,导致后端无法正常接收数据(在直接使用vue+axios开发时,post请求设置请求头content-type:form-data;浏览是正常的且自动生成boundary,后端接口可以正常接收数据)

解决办法:

1.手段生成boundary,仅限普通对象数据(文件类型的二进制数据不能传递,后端接收不到,该问题暂未解决)

const boundary = '----WebKitFormBoundary' + Math.random().toString(36).substr(2, 16);
    const processField = async (name, obj) => {
        let result = ''
        if (obj[name] !== undefined) {
            let value = obj[name];
            if (value instanceof File) {

                const buffer = await new Promise((resolve, reject) => {
                    const reader = new FileReader()
                    reader.onload = () => resolve(reader.result)
                    reader.onerror = reject
                    reader.readAsArrayBuffer(value)
                })

                result +=
                    '\r\n--' + boundary +
                    '\r\nContent-Disposition: form-data; name=\"' + name + '; filename=' + value.name + '\"' +
                    '\r\nContent-Type:' + value.type +
                    '\r\n' +
                    '\r\n' + new Uint8Array(buffer).reduce((acc, byte) => acc + String.fromCharCode(byte), '')

            } else {
                result +=
                    '\r\n--' + boundary +
                    '\r\nContent-Disposition: form-data; name=\"' + name + '\"' +
                    '\r\n' +
                    '\r\n' + value
            }

        }
        return result
    }

// 循环普通对象
    const fillter = async function (obj) {
        let result = ''
        for (let name of Object.keys(obj)) {
            result += await processField(name, obj)

        }
        return result + '\r\n--' + boundary + '--'
    }
  1. 直接使用uniapp自带上传文件api uni.uploadFile
const token = uni.getStorageSync('accessToken')

                uni.uploadFile({
                    filePath: '123123', // 文件名称随意填写,不影响数据传递
                    url: '/api/agent/merchant/apply/save', //仅为示例,并非真实接口地址。
                    formData: obj,
                    header: {
                        Authorization: `Bearer ${token}`,
                    },
                    complete: (data) => {
                        const res = JSON.parse(data.data)
                        if (res.code === 0) {
                            showSuccessToast("进件成功!")
                            uni.redirectTo({
                                url: "/pages/merchant/apply/success"
                            })
                            resetForm()
                        } else {
                            showFailToast({
                                message: res.message,
                                duration: 1500,
                                forbidClick: true
                            })
                        }
                        isLoading.value = false
                    },

                });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容