码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • el-upload上传图片到七牛云或阿里云


    (1)绑定上传地址,上传数据对象

    1. <el-upload class="upload-demo" :action="uploadUrl" :data="uploadData"
    2. :on-success="handleSuccess" :file-list="[]" :show-file-list="false" :limit="1">
    3. el-upload>

    (2)定义数据

    1. // 商户的driver
    2. driver: null,
    3. // 图片上传的路径
    4. uploadUrl: '',
    5. // 上传图片的携带的信息
    6. uploadData: {},
    7. // 图片的链接头部分
    8. cdn: ""

    (3)定义方法

            图片的路径就是图片头加上返回的key

    1. /**
    2. * 获取获取商户的driver
    3. */
    4. async getDriver() {
    5. let res = await customerService.getDriver();
    6. if (res.code == 200) {
    7. this.driver = res.data.cdn_driver;
    8. this.cdn = res.data.cdn;
    9. this.driver ? this.getUploadToken() : "";
    10. }
    11. },
    12. /**
    13. * 上传图片获取token
    14. */
    15. async getUploadToken() {
    16. let params = {
    17. driver: this.driver
    18. };
    19. let res = await customerService.getUploadToken(params);
    20. if (res.code == 200) {
    21. switch (this.driver) {
    22. case 'oss':
    23. this.uploadData = {
    24. OSSAccessKeyId: res.data.accessid,
    25. policy: res.data.policy,
    26. success_action_status: '200',
    27. callback: res.data.callback,
    28. signature: res.data.signature,
    29. dir: res.data.dir
    30. };
    31. this.uploadUrl = res.data.host;
    32. break;
    33. case 'qiniu':
    34. this.uploadData = {
    35. dir: '',
    36. token: res.data.token
    37. };
    38. this.uploadUrl = "https://up.qiniup.com";
    39. }
    40. }
    41. },
    42. /**
    43. * 上传图片成功
    44. */
    45. handleSuccess(res, file, fileList) {
    46. // 图片的路径就是图片头加上返回的key
    47. let imgUrl = `${this.cdn}${res.key}`;
    48. }

  • 相关阅读:
    浅谈嵌入式系统的持续集成
    【Linux】基本指令 (下篇)
    离线数仓-用户行为采集
    在数据框中如何把变量定义为整数型数据
    Tomcat安装及环境配置(详细教程)
    太阳底下无新事,元宇宙能否更上层楼?
    oracle 如何使用脚本实现访问控制(无需额外插件)
    Java面试题之Java的IO
    vue2与vue3生命周期的区别
    Open-source software (OSS)
  • 原文地址:https://blog.csdn.net/qq_43235503/article/details/132652351
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号