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

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

可以考虑使用扩展存储,扩展存储支持非uniapp客户端直接在前端上传, 且扩展存储比内置存储更优惠
大致流程
- 前端请求 ext-storage-co 云对象的url化地址获取前端上传参数
- 前端拿到上传参数后通过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