uniapp上传下载

uniapp调接口用formData无法上传文件

<uni-file-picker
    limit="1"
    file-mediatype="image"
    class="d-flex justify-content-end mr-2"
    @select="upload"
    :auto-upload="false"
>
    <template #default>
        <view class="d-flex justify-content-end">
            <uni-icons type="cloud-upload" size="18" color="#007aff"></uni-icons>
        </view>
    </template>
</uni-file-picker>

async function upload(e: any) {
    let file = e.tempFiles[0].file
    const formData = new FormData()
    formData.append('files', file)
    let res = await axios.post(url, formData)
}

以上是uniapp中使用formData上传文件代码，个人不清楚失败原因

解决办法使用uniapp提供的uni.uploadFile()方法上传

function upload(e: any) {
    let { url: uri, file, name } = e.tempFiles[0];
    inspectionParams.value.reportName = name;
    const files = [{ uri, file, name: "files" }];
    uni.uploadFile({
        url: url,
        files: files,
        header: {
            Authorization: "Bearer " + uni.getStorageSync("TOKEN"),
        },
        success: res => {
            const { data } = JSON.parse(res.data);
        },
    });
}

uploadFile()参数为上传配置

url、files为必填项，files为要上传的文件数组，url为接口地址，header为非必填项，但是一般需要配置token，success为上传成功之后的回调函数

files需要注意uri为文件的本地地址，为必填项，name为后端接口的参数名，即要提交给后端的表单的key，value为文件对象

如果 name 不填或填的值相同，可能导致服务端读取文件时只能读取到一个文件

文件下载：uni.downloadFile()

与上传相同，参数为下载配置

function downLoad(){
    uni.downloadFile({
        url: url,
        header: {
            Authorization: "Bearer " + uni.getStorageSync("TOKEN")
        },
        success: res => {
            const { tempFilePath } = res
        },
        filePath: 存储在本地的路径
    })
}

tempFilePath为文件下载的临时路径，可以用filePath配置文件下载到指定位置，filePath为本地路径

详情参考官方文档：https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile