在上传图片的时候,没有现在的接口,这个时候可以实现第三方上传，这里介绍一下腾讯云上传图片。

一.配置一个腾讯云

1.注册账号

...直接登录官网。

2.创建一个存储桶

3.创建跨域规则

密钥的作用:

上传文件的时候需要密钥。

二.element-ui上传文件

 <el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

重要的参数:

文件上传的方法

上传成功

覆盖默认行为,自定义上传

注意点：

http-request:action失效,和上传成功之后的值也会失效。

三.腾讯云上传使用

1.安装插件

     cos-js-sdk-v5   yarn add  cos-js-sdk-v5

2:导入

 import Cos from 'cos-js-sdk-v5'

3:实例化

  let cos = new Cos({SecretId: 'COS_SECRETID', // 身份识别 IDSecretKey: 'COS_SECRETKEY', // 身份密钥
});

直接搜索密匙获取：

4:使用

  cos.putObject({Bucket: 'XXXXXXXXXXXXXXXXXXX', /* 存储桶: */Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */Key: uid+'',              /* 必须是字符串 */StorageClass: 'STANDARD',  // 固定值Body: 文件对象, // 上传文件对象onProgress: (progressData)=> {//   上传进度console.log(JSON.stringify(progressData));}
}, (err, data)=> {// 上传成功或者失败的回调console.log(err || data);
});

Bucket:

所在的位置:

Key:

使用文件对象里面的uid

Region:

 Region: 'ap-chongqing',

四.实际操作

<template><div class=""><el-uploadclass="avatar-uploader"action="#":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":http-request="httpRequest"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
</template><script>import Cos from 'cos-js-sdk-v5'let cos = new Cos({SecretId:'xxxxxxxxxxxxxxxxxxxxxxx', // 身份识别 IDSecretKey:'xxxxxxxxxxxxxxxxx', // 身份密钥
});export default {data() {return {imageUrl: ''};},methods: {httpRequest(res){cos.putObject({Bucket: 'xxxxxxxxxxxx', /* 存储桶: */Region: 'ap-chongqing',     /* 存储桶所在地域，必须字段 */Key: res.file.uid+'',              /* 必须是字符串 */StorageClass: 'STANDARD',  // 固定值Body:res.file, // 上传文件对象onProgress: (progressData)=> {//   上传进度console.log(JSON.stringify(progressData));}
},(err,data)=>{// console.log(err||data);this.imageUrl='http://'+data.Location
});},handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isPng=file.type==='image/png'const limit=file.size/1024/1024<1if (!isPng) {alert('请上传png图片')}if (!limit) {alert('请上传1M内图片')   }return isPng && limit}}}
</script><style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>

图片：

各位看观，持续更新中。

腾讯云，实现图片上传相关推荐

tp5封装腾讯云cos文件上传sdk
第一步: 使用命令安装sdk到框架vendor目录里 composer require tencentcloud/tencentcloud-sdk-php 第二步:在application/commo ...
Java springboot项目引入腾讯云COS实现上传
Java springboot项目引入腾讯云COS实现上传 pom.xml 配置类CosConfig.java 上传工具类CosClientUtil.java pom.xml <!--腾讯云上传 ...
腾讯云轻量应用服务器器使用技巧-腾讯云OrcaTerm的上传下载
前言: 上传下载是WebShell中不可或缺的功能之一,也是我在日常管理过程中经常使用操作.这里就跟着博主的视角来揭秘,腾讯云OrcaTerm的上传与下载. 对比博主对比了一些shell的应用,这里 ...
如何注册阿里云申请图片上传
该案例是实际开发中注册阿里云实现图片上传 1.在阿里云官网(https://www.aliyun.com/)注册账号: 2. 注册成功后登录阿里云: 3.登录成功后点击右上角"控制台&quo ...
如何注册京东云申请图片上传
该案例是实际开发中注册京东云实现图片上传 1.在京东云官网(https://www.jcloud.com/index)注册账号: 2. 注册成功后登录京东云: 3.登录成功后点击右上角"控制 ...
阿里云oss云存储图片上传在wangEditor富文本编辑器上的集成
调用方式 html: <textarea name="newsinfo_content" id="editor" style="height:5 ...
记录一个阿里云OSS图片上传错误
upload.js?c0e8:599 POST https://gulimall-.oss-cn-shanghai.aliyuncs.com/ 403 (Forbidden) 今天打开项目运行的时候放 ...
flutter阿里云OSS图片上传
一.选择图片: 使用插件 image_picker: "^0.5.0+3" 使用image_picker选择图片,代码如下: // 相机拍照或者从图库选择图片pickImage(c ...
【硅谷课堂】腾讯云点播WEB上传方式代码（第二种方式）
下载依赖 npm i vod-js-sdk-v6 前端 /vod/course/Video/Form.vue <template><e ...
SpringBoot整合腾讯云COS（上传）
腾讯云COS文档:对象存储快速入门-SDK 文档-文档中心-腾讯云 (tencent.com) 开通腾讯云COS 创建存储桶请求域名可做拼接文件访问URL使用然后下一步即可上传文件时需要以上红 ...

腾讯云，实现图片上传

一.配置一个腾讯云

1.注册账号

2.创建一个存储桶

3.创建跨域规则

二.element-ui上传文件

http-request:action失效,和上传成功之后的值也会失效。

三.腾讯云上传使用

四.实际操作

腾讯云，实现图片上传相关推荐

最新文章

热门文章