dasdadas
dasdadas
  • 发布:2021-06-01 00:13
  • 更新:2021-11-02 15:43
  • 阅读:1349

云开发上传图片问题,云开发如何接收文件

分类:uniCloud

问题:

现在开发的是一个普通的vue H5网页,接口使用的是云开发,所以使用了云函数url化。
现在需要上传图片,按照文档的说法:

云存储的上传方式有3种:  

1. web界面:即在https://unicloud.dcloud.net.cn/ web控制台,点击云存储,通过web界面进行文件上传。该管理界面同时提供了资源浏览、删除等操作界面。  
2. 客户端API或组件上传:在前端js中编写uniCloud.uploadFile,或者使用uni ui的FilePicker组件,文件选择+上传均封装完毕。  
3. 云函数上传文件到云存储:即在云函数js中编写uniCloud.uploadFile  

所以采用第三种。

腾讯云支持在fileContent内传可读流 或buffer  
阿里云支持在fileContent内传文件绝对路径或buffer

所以有前端代码如下:

主要是把文件转成了Arraybuffer发给服务器

            uni.chooseImage({  
                count: 1,  
                sizeType: ['compressed'],  
                sourceType: ['album'],  
                success: async res => {  
                    console.log(res);  
                    // console.log('chooseImage success, temp path is', res.tempFilePaths[0]);  
                    var img = res.tempFilePaths[0];  
                    let navtive_name = res.tempFiles[0].name;  
                    // let result = await uniCloud.uploadFile({  
                    //  filePath: img,  
                    //  cloudPath: new Date().getTime() + navtive_name,  
                    //  fileType: 'image'  
                    // });  
                    let form = new FormData();  
                    var file = res.tempFiles[0];  
                        var reader = new FileReader();  
                        reader.readAsArrayBuffer(file);  
                        reader.onload = (e)=>{  
                          let buffer = e.target.result  //此时是arraybuffer类型  
                       form.append('img',buffer)  
                      this.$http  
                        .post('/api/upload_file',form,{  
                            processData:false,  
                            contentType:false  
                        })  
                        .then(result => {  
                            console.log(result)  
                            this.imageSrc.push(result.fileID);  
                            uni.showToast({  
                                title: '上传成功',  
                                icon: 'success',  
                                duration: 1000  
                            });  
                        })  
                        .finally(res => {  
                            console.log(res)  
                            uni.hideLoading();  
                        });  

                        }  

                },  
                fail: err => {  
                    console.log(err);  
                }  
            });

然后服务器转化成node的Buffer 然后调用官方给的方法上传,可以成功,也能拿到图片地址 云存储也有图片。但是图片是个空的。

    async upload_file(params){  
        console.log(params)  
    let result = await uniCloud.uploadFile({  
        cloudPath: "test-admin.jpeg",  
        fileContent: Buffer.from(params.img)  
    });  

    return result   

    },  

求教:
云存储接收文件是需要流一类的东西吗? 如果是怎么写呢?
如果这种方法行不通,还有没有别的办法。
真心求教,帮助解决问题的发10元红包、

2021-06-01 00:13 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

楼主弄成功了嘛

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

完整的云函数代码贴一下,params是什么?需要注意云函数url化是不能接受大的请求体,即文件内容不能超过1MB。另外客户端使用formData的话云端也要对formdata进行解析才行。如果一定要这么实现可以参考这个插件: https://ext.dcloud.net.cn/plugin?id=2282

阿里云目前请求与响应有如下限制:  
请求Body大小限制,不能超过1M。  
响应Body大小限制,不能超过1M。  

腾讯云目前请求与响应有如下限制:  
请求Body大小限制,不能超过4M。  
响应Body大小限制,不能超过6M。
阿里云111

阿里云111 - aliyun

1***@qq.com

1***@qq.com

求代码1111

该问题目前已经被锁定, 无法添加新回复