vue前端上传图片到腾讯云，超详细上传图片教程，cos，前端直传

首先是安装依赖

复制下面代码即可直接安装

npm install cos-js-sdk-v5 --save

安装过程这里就直接跳过了，这个只是基本操作

接着是进行配置

在项目中的src包下的utils包中创建一个cos.js文件，你也可以跟我一样创建的名字一样，实际上此.js文件可放在任意位置，只不过在导入时的路径会有所不同

在cos.js文件中写入以下代码

// 
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
var cos = new COS({
  SecretId: '身份识别ID', // 身份识别ID
  SecretKey: '身份秘钥' // 身份秘钥
});
export{cos}

使用时，在vue页面进行导入操作

此代码不建议直接复制，要根据自己的情况来，可能cos.js文件放置的包的位置不同而略微有所改变

import { cos } from '../utils/cos.js';

方法代码

我这里的腾讯云的图片设置的是公共读，并不需要签名，所以我赋值的时候是直接赋值的，如果你是个人开发者，也可设置为公共读，理论上来说，没有太大的影响。

		//上传
      Upload(res) {
        // 执行上传操作
        cos.putObject({
          Bucket: '11-11111111', /* 存储桶 */
          Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
          Key: res.file.name, /* 文件名 */
          StorageClass: 'STANDARD', // 上传模式, 标准模式
          Body: res.file // 上传文件对象
        }, (err, data) => {
          console.log(err || data)
          // 上传成功之后
          if (data.statusCode === 200) {
            this.imgUrl = `https:${data.Location}`;
          }
        })
      },

最后是html代码

html代码可以在很多地方找到，我这里是用的elementUI中自带的上传组件，你也可用自己另找的，这个不同不影响操作

<el-upload
	class="upload-demo"
	action=""
	multiple
	:limit="3"
	:http-request="Upload"
	:file-list="fileList">
	<el-button size="small" type="primary">点击上传</el-button>
	<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

最后，有什么不懂的地方欢迎留言

我创建了一个技术交流微信群

加我V，拉你进群，备注来意

我置顶的博客最下方有二维码，可加我V

这是我置顶博客的链接，点击跳转