怒海狂鲨
怒海狂鲨
  • 发布:2024-05-29 13:37
  • 更新:2024-05-29 19:27
  • 阅读:109

云函数云对象请求体超过1MB怎么办?

分类:uniCloud

PC端web页面,不是uniapp,上传图片到unicloud云存储,先转为base64再调用云函数,再上传到云存储,这时如果图片超过1MB大小,除了压缩还有什么办法?

2024-05-29 13:37 负责人:无 分享
已邀请:
DCloud_uniCloud_VK

DCloud_uniCloud_VK

可以考虑使用扩展存储,扩展存储支持非uniapp客户端直接在前端上传, 且扩展存储比内置存储更优惠

大致流程

  1. 前端请求 ext-storage-co 云对象的url化地址获取前端上传参数
  2. 前端拿到上传参数后通过http post 'Content-Type': 'multipart/form-data' 的方式直接上传到扩展存储

扩展存储开通教程: https://doc.dcloud.net.cn/uniCloud/ext-storage/service.html

扩展存储开发文档: https://doc.dcloud.net.cn/uniCloud/ext-storage/dev.html

下面是使用 axios 上传示例代码,下方代码虽然是在uniapp上写的,但上传代码跟uniapp无关

<template>  
    <view class="content">  
        <button class="button" @click="uploadFile">上传文件(前端上传)</button>  
        <view v-if="imageUrl" class="image-box">  
            <view class="text">上传成功,图片地址:</view>  
            <view class="text">{{ imageUrl }}</view>  
            <image class="image" :src="imageUrl" mode="widthFix"></image>  
        </view>  
    </view>  
</template>  

<script>  
    import axios from 'axios';  

    export default {  
        data() {  
            return {  
                imageUrl: ""  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            uploadFile() {  
                uni.chooseImage({  
                    count: 1,  
                    success: async (res) => {  
                        const filePath = res.tempFilePaths[0];  
                        const file = res.tempFiles[0];  
                        uni.showLoading({ title: "上传中...", mask: true });  

                        let tokenUrl = 'https://fc-mp-xxxxx.next.bspapp.com/http/ext-storage-co/getUploadFileOptions';  
                        axios({  
                                method: "GET",  
                                url: tokenUrl,  
                                params: {  
                                    domain: "cdn.xxx.com", // 改成你七牛绑定的域名  
                                    cloudPath: `test/${Date.now()}.jpg`, // 文件路径(可自己定义文件名规则)  
                                }  
                            })  
                            .then((res) => {  
                                let uploadFileOptionsRes = res.data;  
                                console.log('then-uploadFileOptionsRes: ', uploadFileOptionsRes)  
                                let url = uploadFileOptionsRes.uploadFileOptions.url; // 上传地址  
                                let name = uploadFileOptionsRes.uploadFileOptions.name; // 上传文件名  
                                let token = uploadFileOptionsRes.uploadFileOptions.formData.token; // 上传token  
                                let key = uploadFileOptionsRes.uploadFileOptions.formData.key; // 上传key  

                                // 创建一个 FormData 对象  
                                const formData = new FormData();  
                                formData.append('file', file);  
                                formData.append('token', token);  
                                formData.append('key', key);  
                                // 发送请求  
                                axios.post(url, formData, {  
                                    headers: {  
                                        'Content-Type': 'multipart/form-data'  
                                    },  
                                    onUploadProgress: (progressEvent) => {  
                                        let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);  
                                        console.log(`上传进度:${percentCompleted}%` );  
                                    }  
                                })  
                                .then((uploadRes) => {  
                                    // 处理成功情况  
                                    const res = {  
                                        cloudPath: uploadFileOptionsRes.cloudPath, // 文件云端路径  
                                        fileID: uploadFileOptionsRes.fileID, // 文件ID  
                                        fileURL: uploadFileOptionsRes.fileURL, // 文件URL(如果是私有权限,则此URL是无法直接访问的)  
                                        fileInfo: typeof uploadRes.data === "string" ? JSON.parse(uploadRes.data) : uploadRes.data,  
                                    };  
                                    // 数据库里可直接保存 fileURL 或 fileID  
                                    console.log("上传成功", res);  
                                    this.imageUrl = res.fileURL;  
                                })  
                                .catch((err) => {  
                                    // 处理错误情况  
                                 console.log("上传失败", err);  
                                });  
                                uni.hideLoading();  
                            })  
                            .catch((err) => {  
                                console.log("catch", err);  
                                uni.hideLoading();  
                            });  
                    }  
                });  
            },  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        padding: 20px;  
    }  

    .button {  
        margin-bottom: 10px;  
        width: 100%;  
    }  

    .image-box {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  

    .text {  
        word-break: break-all;  
        font-size: 12px;  
    }  

    .image {  
        width: 200px;  
        margin-top: 10px;  
    }  
</style>
  • 怒海狂鲨 (作者)

    要充200块钱,除此之外没办法了嘛

    2024-06-03 18:06

  • DCloud_uniCloud_VK

    回复 怒海狂鲨: 200是保证金,不用了可以退款

    2024-06-03 19:19

  • 怒海狂鲨 (作者)

    请问,如果是nodejs项目,不是unicloud上传到七牛,代码怎样?

    是不是这样:

    const file = fs.readFileSync('xxx')

    然后把file扔进formData里,发请求

    2024-06-08 00:27

  • DCloud_uniCloud_VK

    回复 怒海狂鲨: 只要通过url化获取到上传token后,在任何地方都能上传(直接通过http post上传即可)

    2024-06-11 10:57

要回复问题请先登录注册