ZBLOG

uniapp 把图片上传到阿里云oss,header传参

在 UniApp 中将图片上传到阿里云 OSS,并在请求头中传递参数,通常需要进行以下几个步骤。由于直接使用 Access Key 和 Secret 在前端是不安全的,建议通过后端生成一个临时的签名来进行上传。

步骤 1: 后端生成签名

首先,在后端实现一个接口,用于生成阿里云 OSS 的上传签名。这是一个 Node.js 的示例:

  1. const Koa = require('koa');
  2. const Router = require('koa-router');
  3. const OSS = require('ali-oss');
  4. const app = new Koa();
  5. const router = new Router();
  6. router.get('/api/sign', async (ctx) => {
  7. const client = new OSS({
  8. region: 'your-region',
  9. accessKeyId: 'your-access-key-id',
  10. accessKeySecret: 'your-access-key-secret',
  11. bucket: 'your-bucket-name'
  12. });
  13. try {
  14. // 创建上传策略
  15. const result = await client.sign({
  16. key: `uploads/${Date.now()}.png`, // 自定义文件名和路径
  17. expires: 60 // 签名有效期(单位:秒)
  18. });
  19. ctx.body = {
  20. url: result.url,
  21. policy: result.policy,
  22. signature: result.signature,
  23. accessKeyId: 'your-access-key-id'
  24. };
  25. } catch (err) {
  26. ctx.throw(500, err);
  27. }
  28. });
  29. app.use(router.routes());
  30. app.listen(3000);

步骤 2: 前端调用并上传图片

然后,在 UniApp 中,你可以调用这个接口获取签名,然后使用该签名进行文件上传:

  1. export default {
  2. data() {
  3. return {
  4. imageUrl: ''
  5. };
  6. },
  7. methods: {
  8. async uploadImage() {
  9. const res = await uni.chooseImage({
  10. count: 1
  11. });
  12. const filePath = res.tempFilePaths[0];
  13. // 获取签名
  14. const signRes = await this.getSignature();
  15. if (signRes) {
  16. this.uploadToAliyun(filePath, signRes);
  17. }
  18. },
  19. async getSignature() {
  20. try {
  21. const response = await uni.request({
  22. url: 'http://localhost:3000/api/sign', // 替换为你的后端地址
  23. method: 'GET'
  24. });
  25. return response.data;
  26. } catch (error) {
  27. console.error('Error getting signature:', error);
  28. return null;
  29. }
  30. },
  31. async uploadToAliyun(filePath, signData) {
  32. try {
  33. const response = await uni.uploadFile({
  34. url: signData.url, // 签名返回的 URL
  35. filePath,
  36. name: 'file', // 此处根据后端要求调整字段名称
  37. header: {
  38. 'Authorization': `OSS ${signData.accessKeyId}:${signData.signature}`,
  39. 'x-oss-security-token': signData.securityToken || '' // 如果需要的话,也可以添加 Security Token
  40. },
  41. formData: {
  42. key: `uploads/${Date.now()}.png`, // 自定义文件名和路径,与后端一致
  43. policy: signData.policy,
  44. success_action_status: "200" // 用于确认是否成功,可以根据实际需求调整
  45. }
  46. });
  47. if (response.statusCode === 200) {
  48. console.log('Upload Success:', response.data);
  49. this.imageUrl = JSON.parse(response.data).url; // 假设返回了文件的访问 URL,这里的处理根据实际返回格式而定。
  50. } else {
  51. console.error('Upload Failed:', response);
  52. }
  53. } catch (error) {
  54. console.error('Error uploading to Aliyun:', error);
  55. }
  56. }
  57. }
  58. }

注意事项

  1. 安全性:不要在前端代码中暴露你的 Access Key Secret,应该通过后台服务生成临时的签名。
  2. CORS 配置:确保你在阿里云控制台配置了 CORS,以允许跨域请求。
  3. 文件路径和命名:可以根据需求自定义文件路径和命名方式。

以上示例提供了一种基本的实现思路,可以根据具体情况进一步完善。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20426

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?