当前位置: 首页 > news >正文

el-upload上传图片到七牛云或阿里云

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

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

(2)定义数据

// 商户的driver
driver: null,
// 图片上传的路径
uploadUrl: '',
// 上传图片的携带的信息
uploadData: {},
// 图片的链接头部分
cdn: ""

(3)定义方法

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

/*** 获取获取商户的driver*/
async getDriver() {let res = await customerService.getDriver();if (res.code == 200) {this.driver = res.data.cdn_driver;this.cdn = res.data.cdn;this.driver ? this.getUploadToken() : "";}
},
/*** 上传图片获取token*/
async getUploadToken() {let params = {driver: this.driver};let res = await customerService.getUploadToken(params);if (res.code == 200) {switch (this.driver) {case 'oss':this.uploadData = {OSSAccessKeyId: res.data.accessid,policy: res.data.policy,success_action_status: '200',callback: res.data.callback,signature: res.data.signature,dir: res.data.dir};this.uploadUrl = res.data.host;break;case 'qiniu':this.uploadData = {dir: '',token: res.data.token};this.uploadUrl = "https://up.qiniup.com";}}
},
/*** 上传图片成功*/
handleSuccess(res, file, fileList) {// 图片的路径就是图片头加上返回的keylet imgUrl = `${this.cdn}${res.key}`;
}

http://www.lryc.cn/news/158603.html

相关文章:

  • Web jQuery—选择器、样式和效果
  • Java和Kotlin的Field在继承中的不同表现
  • MySQL 子查询
  • Ubuntu离线或在线安装CMake
  • 后端面试话术集锦第 十七 篇:MySQL面试话术
  • < 文件资源管理器 > 和 < 此电脑 > 有什么区别?
  • 线上问诊:可视化展示
  • 如何选择合适的HTTP代理服务器
  • Car Window Control Reset
  • 序列号序列号
  • SSM(Spring-Mybatis-SpringMVC)
  • MySQL——数据的删除以及MySQL中的约束
  • 静态路由 网络实验
  • 数据结构-01 数据结构基本概念,算法时间复杂度,空间复杂度
  • 【Redis】Bitmap 使用及应用场景
  • C#,数值计算——用于积分函数与方法的Stiel类的计算方法与源程序
  • 报错:为什么数组明明有内容但打印的length是0
  • go gin gorm连接postgres postgis输出geojson
  • 4. Java 的线程安全机制之`volatile`
  • ​Vue + Element UI前端篇(二):Vue + Element 案例 ​
  • Qt5中connect信号槽无效问题 C++
  • 服务端 TCP 连接的 TIME_WAIT 过多问题的分析与解决
  • 【Unity3D赛车游戏优化篇】【十】汽车粒子特效和引擎咆哮打造极速漂移
  • 肖sir__设计测试用例方法之编写测试用例12
  • Android 11.0 ota升级之Systemui下拉状态栏quick_settings_tiles_default值减少时更新的功能实现
  • Android Studio中创建java项目
  • 冠达管理:“旺季”来临,煤炭板块走高,云煤能源、陕西黑猫涨停
  • 【EI检索】第四届公共卫生与数据科学国际学术研讨会(ICPHDS 2023)
  • 对时序数据进行分类与聚类
  • Win10如何找回图片查看器