[JavaScript知识库]vue+element上传图片到腾讯云

安装 cos-js-sdk-v5

npm install cos-js-sdk-v5

导入

import Cos from "cos-js-sdk-v5";
import cosKye from "@/utils/cos/key";
const cos = new Cos({
  SecretId: 'xxxxx-xxx', // 身份识别 ID   （ 腾讯云服务器密钥 ）
  SecretKey: 'xxxxx-xxx', // 身份密钥
});

 <el-form>
	<el-form-item label="上传图片" prop="pass">
	   <el-upload
	     class="avatar-uploader"
	     :show-file-list="false"
	     action="https://jsonplaceholder.typicode.com/posts/"
	     list-type="picture-card"
	     :on-remove="handleRemove"
	     :on-change="beforeAvatarChange"
	     :auto-upload="true"
	     :before-upload="beforeAvatarUpload"
	     :on-success="handleAvatarSuccess"
	     :http-request="httprequest"
	   >
	     <img v-if="imageUrl" :src="imageUrl" class="avatar" />
	     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </el-form-item>
  </el-form>



//js


	/**
     * 上传腾讯云
     */
    httprequest(res) {
      // 打印获得当前res的值.res.file就等于当前上传的对象
      console.log("httprequest-----------", res);
      // return
      cos.putObject(
        {
          Bucket: 'xxxxx-xxx' /* 存储桶: */,
          Region: 'xxxxx-xxx' /* 存储桶所在地域，必须字段 */,
          Key: "merchants/categories/" + res.file.name /* 必须是字符串  前面拼接存储桶文件名 */,
          StorageClass: "STANDARD", // 固定值
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            // 上传进度
            console.log("上传进度-------", JSON.stringify(progressData));
          },
        },
        (err, data) => {
          // 上传成功或者失败的回调
          console.log("腾讯云打印----------->>>>>>", err || data);
          // 默认显示的图片等于上传成功后的图片
          if (data) {
            this.imageUrl = "https://" + data.Location;
          } 
        }
      );
    },
    /**
     * 上传图片前判断
     */
    beforeAvatarUpload(file) {
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPNG) {
        this.$message.error("上传分类图片只能是 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传分类图片大小不能超过 2MB!");
      }
      return isPNG && isLt2M;
    },

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖