腾讯云 小程序 SDK对象存储 COS使用记录，原生小程序写法。

news2024/10/1 1:19:19

最近做了一个项目，需求是上传文档，文档类型多种，图片，视频，文件，doc,xls,zip,txt 等等,而且文档类型可能是大文件，可能得上百兆，甚至超过1G。

腾讯云文档地址：https://cloud.tencent.com/document/product/436/31953 腾讯云可以支持5G 的文件，还是很厉害的。
这里只要是讲一下使用这个SDK的流程，因为第一次看文档的时候，文档介绍很简洁，甚至有点笼统。我当时都是很懵的，无从下手。
这个是小程序小程序直传实践的实现步骤，同样使用于对象存储。，我们一开始研究SDK对象储存觉得很难，然后想简单点，搞个对象储存，不这么麻烦。最后是借鉴了这里的步骤思路。
1、登录后台创建桶，地域
2、获取秘钥
3、小程序配置白名单
在这里插入图片描述
核心代码就这么点，选择文件，将后缀传给服务器，服务器根据后缀，生成一个cos文件路径，计算对应的签名，返回URL和签名信息给前端。
在这里插入图片描述
在这里插入图片描述

最终效果
在这里插入图片描述

* 文件名称： * 备注： * 文件： 去上传文件 文件列表 {{item}} × 保 存

wxcs
page{
font-size: 28rpx;
color: #333;
}
.content-row {
display: flex;
height: 48px;
color: #333;
padding-left: 20rpx;
line-height: 48px;
border-bottom: 1rpx solid #ddd;
}

.content-rows {
display: flex;
color: #333;
padding-left: 20rpx;
line-height: 48px;
}

.content-title {
width: 190rpx;
color: #666;
}
.click-btn{
background-color: #E1B368;
}
.click-btn-hover{
background-color: #b98633;
}

/index.wxss/
.title {
display:block;
box-sizing: border-box;
padding: 0 5px;
width: 100%;
height: 30px;
line-height: 30px;
border-top: 1px solid #ccc;
margin:auto;
font-size:14px;
color:#333;
text-align: left;
font-weight: bold;
}

.list-panel{
width: 100%;
}

.sub-title{
display:block;
box-sizing: border-box;
padding: 0 5px;
width: 100%;
height: 30px;
line-height: 30px;
font-size:12px;
color:#333;
text-align: left;
font-weight: bold;
}

.list {
margin-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.button {
font-weight: 500;
float: left;
width: 710rpx;
margin: 0 3px 3px 0;
text-align: center;
font-size: 14px;
height: 60rpx;
padding-top: 6px;
}
.click-btn2 {
background-color: #eee;
}

.click-btn-hover2 {
background-color: #d3d3d3;
}

wxjs
在这里插入图片描述
Js部分引入了两个文件，cos-wx-sdk-v5.js 文件可以在github上下载https://github.com/tencentyun/cos-wx-sdk-v5/tree/master/demo
github上右demo吗，我通过demo自己稍微改造了一下。
和config，其中config就是配置的一些内容
在这里插入图片描述

var COS = require(‘…/…/lib/cos-wx-sdk-v5’);
const app = getApp()
var config = require(‘…/…/config’)

//这里是获取签名授权
var getAuthorization = function (options, callback) {
wx.request({
method: ‘POST’,
url: config.stsUrl, // 服务端签名，参考 server 目录下的两个签名例子
dataType: ‘json’,
data: {
uid: wx.getStorageSync(‘uid’),
token: wx.getStorageSync(‘token’)
},
header: {
‘content-type’: ‘application/x-www-form-urlencoded’
},
success: function (result) {
var data = result.data.data;
var credentials = data && data.credentials;
// if (!data || !credentials) return console.error(‘credentials invalid’);
console.log(credentials)
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: data.startTime, // 时间戳，单位秒，如：1580000000，建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
});
},
});
};
var cos = new COS({
getAuthorization: getAuthorization,
});

Page({

/**

  • 页面的初始数据
    */
    data: {
    itemname: ‘’,
    id: ‘’,
    beizhu: ‘’,
    img: [],
    pdfFile: ‘’,
    fileType: ‘’,
    filekeyname: ‘’,
    jindu: ‘’,
    speed: ‘’,
    datalist:[],
    realimg:[]
    },
    onLoad(options) {
    if (options.id) {
    this.setData({
    id: options.id
    })
    }

},
handleItem(e) {
this.setData({
itemname: e.detail.value
})
},
handlebeizhu(e) {
this.setData({
beizhu: e.detail.value
})
},
//核心代码
postUpload() {
let that = this
wx.chooseMessageFile({
count: 1,
type: ‘all’,
success: function (res) {
let data = res.tempFiles[0]
console.log(data.name)
let testarr = []
testarr.push(data.name.replace(/,/g, ‘’))
that.setData({
realimg:that.data.realimg.concat(testarr)
})
wx.showLoading({
title: ‘上传中…’,
})
var lastDotIndex = data.name.lastIndexOf(“.”); // 查找最后一个"."的索引
var secondPart = data.name.slice(lastDotIndex + 1);
console.log(secondPart)
cos.uploadFile({
Bucket: config.Bucket,
Region: config.Region,
Key: Date.now() + Math.floor(Math.random() * 1000) + ‘.’+secondPart,
FilePath: data.path,
FileSize: data.size,
SliceSize: 1024 * 1024 * 5, // 文件大于5mb自动使用分块上传
onTaskReady: function (taskId) {
TaskId = taskId;
},
onProgress: function (info) {
var percent = parseInt(info.percent * 10000) / 100;
var speed = parseInt((info.speed / 1024 / 1024) * 100) / 100;
console.log(that, ‘进度：’ + percent + ‘%; 速度：’ + speed + ‘Mb/s;’);
that.setData({
jindu: percent,
speed: speed
})
},
onFileFinish: function (err, data, options) {
if(!err){
console.log(that.data.realimg)
let arr = []
arr.push(options.Key)
that.setData({
img: that.data.img.concat(arr) //我们自己稍微改造了一下，上传到腾讯云的文件名是在时间戳+3位的随机数，但是显示在本地的文件名是自己原本给文件的命名。（因为大家的文件命名不规范，长长短短，啥都有。统一命名，在腾讯云后台看起来不会奇奇怪怪。）
})
}else{
that.setData({
realimg:that.data.realimg.pop()
})
}

          wx.hideLoading()
          console.log(options.Key + '上传' + (err ? '失败' : '完成'));
        },
      },
      function (err, data) {
        console.log(err || data);
      },
    );
  },
});

},

DelImg(e){
console.log(e)
let i = e.currentTarget.dataset.index
let that = this
wx.showModal({
title: ‘提示’,
content: ‘确定要删除吗？’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
that.data.realimg.splice(i, 1);
that.data.img.splice(i, 1);
that.setData({
realimg:that.data.realimg,
img:that.data.img,
})
}
}
})
},
handlesave() {
let that = this
if (!this.data.itemname) {
wx.showToast({
title: ‘请填写文件名称’,
icon: ‘error’,
duration: 2000
})
return
}
if (this.data.realimg.length <1) {
wx.showToast({
title: ‘请上传文件’,
icon: ‘error’,
duration: 2000
})
return
}
wx.showLoading({
title: ‘保存中…’,
})
// console.log(this.data.fileList1)
// var img = [];
// var realimg = [];

// this.data.fileList1.forEach(function (item) {
//   var index = 12
//   // 分割字符串，取前十位  
//   var firstPart = item.slice(0, 13);
//   // 提取下标12之后的内容  
//   var index = 12;
//   var secondPart = item.slice(index + 1);
//   // 提取最后一个"."之后的内容  
//   var lastDotIndex = item.lastIndexOf(".");
//   var thirdPart = item.slice(lastDotIndex + 1);
//   img.push(firstPart + "." + thirdPart);
//   realimg.push(secondPart);
// });
// console.log(img, realimg)
// return
wx.request({
  url: app.globalData.siteurlh5 + '/fileadd.php',
  data: {
    id: this.data.id,
    beizhu: this.data.beizhu,
    uid: wx.getStorageSync('uid'),
    token: wx.getStorageSync('token'),
    title: this.data.itemname,
    img: this.data.img, // 时间戳命名文件
    realimg: this.data.realimg  //文件真实名称
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'POST',
  success(res) {
    console.log(res, )
    if (res.data.bs == 'success') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'success'
      })
      setTimeout(() => {
        wx.navigateBack({
          delta: 1,
        })
      }, 2000);
    } else if (res.data.bs == 'failed') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'error'
      })
    } else if (res.data.bs == 'error') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'error'
      })
    } else if (res.data.bs == 'guoqi') {
      wx.removeStorageSync('userInfo'); //清除缓存
      wx.removeStorageSync('uid')
      wx.removeStorageSync('token')
      wx.redirectTo({
        url: '../index/index',
      })
    }

  },
  fail(err) {
    console.log(err)
    wx
  },
  complete() {
    // wx.hideLoading()
  }
})

},
})

在这里插入图片描述
上传完成这个文件后缀名就是我们的文件了。但是它不是完整的路径，完整的路径是在腾讯云上面就可以预览了。如果前端要下载文件，那就再让你的后台把完整的路径传回来。
在这里插入图片描述

以下是一个简单的上传多种文件类型的方案：
我们最初是指考虑了简单的上传文件，并没有考虑大的文件，所以超过20M 的文件，这里是不支持的。
![在这里插入图片描述](https
😕/img-blog.csdnimg.cn/c1ecbd1f015f43fdb7422f425223ffac.png)
wxml





项目名称：






备注：





*
文件：



    <view class="bg-img" wx:for="{{imgList1}}" wx:key="index" style="position: relative;">
      <image src="{{item}}" mode="aspectFill" data-url="{{item}}" 
      bindtap='previewImage' data-src="{{item}}" style="width:140rpx;height:140rpx;margin: 10rpx 10rpx 10rpx 0 ;"></image>
      <view bindtap="DelImg" data-index="{{index}}">
        <view style="z-index: 9; margin:10rpx 17rpx 10rpx 0;width: 40rpx;height: 30rpx;background-color: #555;color: white;position: absolute;right: -16rpx;top: -10rpx;text-align: center;line-height: 30rpx;border-radius: 6rpx;">×</view>
      </view>
    </view>

    <view class="bg-img" wx:for="{{videoList1}}" wx:key="index" style="position: relative;">
      <video src="{{item}}" bindtap="previewVideo" 
      data-url="{{item}}" style="width:140rpx;height:140rpx;margin: 10rpx 10rpx 20rpx 0 ;" 
      autoplay="{{isPlay}}" loop="{{false}}" show-center-play-btn='{{true}}' show-play-btn="{{true}}" 
      controls picture-in-picture-mode="{{['push', 'pop']}}">
      </video>
      <view bindtap="DelImg2" data-index="{{index}}">
        <view style="z-index: 9; margin:10rpx 17rpx 10rpx 0;width: 40rpx;height: 30rpx;background-color: #555;color: white;position: absolute;right: -16rpx;top: -10rpx;text-align: center;line-height: 30rpx;border-radius: 6rpx;">×</view>
      </view>
    </view>

    <view class="bg-img" wx:for="{{fileList1}}" wx:key="index" style="position: relative;">
      <input placeholder="查看附件" class="click-btn2" hover-class="click-btn-hover2" disabled bindtap="handledownload" data-img="{{item}}"  
      placeholder-style="color:#888" name="input" style="padding: 0px 10px;width:640rpx;font-size: 28rpx;color: #888;height: 70rpx;line-height: 70rpx;margin-top: 10rpx;"></input>
      <view bindtap="DelImg3" data-index="{{index}}">
        <view style="z-index: 9; margin:10rpx 17rpx 10rpx 0;width: 40rpx;height: 30rpx;background-color: #555;color: white;position: absolute;right: -16rpx;top: -10rpx;text-align: center;line-height: 30rpx;border-radius: 6rpx;">×</view>
      </view>
    </view>

    <view bindtap="uploadFileTap" data-id="1" >
      <view style="width:140rpx;height:140rpx;border:1px dashed #ddd;text-align:center;background:white;position: relative;margin:10rpx 0;">
        <image src="/images/upload.png" style="width:45rpx;height:37rpx;margin-top: 35rpx;"></image>
        <view style="font-size: 20rpx;color: #333;">
          文件
        </view>
      </view>
    </view>
  </view>
</view>
保 存 wxss page{ font-size: 28rpx; color: #333; } .content-row { display: flex; height: 48px; color: #333; padding-left: 20rpx; line-height: 48px; border-bottom: 1rpx solid #ddd; }

.content-rows {
display: flex;
color: #333;
padding-left: 20rpx;
line-height: 48px;
}

.content-title {
width: 190rpx;
color: #666;
}
.click-btn{
background-color: #ff5a28;
}
.click-btn-hover{
background-color: #d44215;
}

/index.wxss/
.title {
display:block;
box-sizing: border-box;
padding: 0 5px;
width: 100%;
height: 30px;
line-height: 30px;
border-top: 1px solid #ccc;
margin:auto;
font-size:14px;
color:#333;
text-align: left;
font-weight: bold;
}

.list-panel{
width: 100%;
}

.sub-title{
display:block;
box-sizing: border-box;
padding: 0 5px;
width: 100%;
height: 30px;
line-height: 30px;
font-size:12px;
color:#333;
text-align: left;
font-weight: bold;
}

.list {
margin-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.button {
float: left;
margin: 0 3px 3px 0;
text-align: left;
font-size: 14px;
height: 28px;
line-height:28px;
padding:0 10px;
}
.click-btn2 {
background-color: #eee;
}

.click-btn-hover2 {
background-color: #d3d3d3;
}

wxjs
const app = getApp()
Page({

/**

  • 页面的初始数据
    */
    data: {
    itemname: ‘’,
    id: ‘’,
    beizhu: ‘’,
    imgList1: [],
    fileList1:[],
    videoList1:[],
    pdfFile: ‘’,
    fileType:‘’
    },

handledownload(e) {
console.log(e)
let img = e.currentTarget.dataset.img
wx.downloadFile({
url: img,
success: function (res) {
// console.log(res)
// return
var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
wx.openDocument({
filePath: Path,
fileType: Path.split(“.”)[Path.split(“.”).length - 1],
showMenu: true,
success: function (a) {},
fail: function (a) {
console.log(a)
wx.showToast({
title: ‘文件打开失败’,
icon: ‘none’,
duration: 2000,
})
}
})
}
})
},
DelImg(e){
console.log(e)
let i = e.currentTarget.dataset.index
let that = this
wx.showModal({
title: ‘提示’,
content: ‘确定要删除吗？’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
that.data.imgList1.splice(i, 1);
that.setData({
imgList1:that.data.imgList1,
pdfFile:‘’
})
}
}
})
},
DelImg2(e){
console.log(e)
let i = e.currentTarget.dataset.index
let that = this
wx.showModal({
title: ‘提示’,
content: ‘确定要删除吗？’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
that.data.videoList1.splice(i, 1);
that.setData({
videoList1:that.data.videoList1,
pdfFile:‘’
})
}
}
})
},
DelImg3(e){
console.log(e)
let i = e.currentTarget.dataset.index
let that = this
wx.showModal({
title: ‘提示’,
content: ‘确定要删除吗？’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if (res.confirm) {
that.data.fileList1.splice(i, 1);
that.setData({
fileList1:that.data.fileList1,
pdfFile:‘’
})
}
}
})
},
previewImage(e){
console.log(e)
const current = e.currentTarget.dataset.url //获取当前点击的 图片 url
let arr = []
arr.push(current)
wx.previewImage({
current: current,
urls: arr
})
},
previewImg() {
let img = this.pdfFile
wx.downloadFile({
url: img,
success: function(res) {
var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
wx.openDocument({
filePath: Path,
showMenu: true,
success: function(a) {},
fail: function(a) {
wx.showToast({
title: ‘文件打开失败’,
icon: ‘none’,
duration: 2000,
})
}
})
}
})
},
uploadDIY(filePaths, successUp, failUp, i, length) {
wx.showLoading({
title: ‘上传中…’,
})
console.log(filePaths[i])
let that = this
wx.uploadFile({
url: ‘https://www.xxxxx.com/mnp/oaapi/fileupload.php’,
filePath: filePaths[i].path,
name: ‘file’,
formData: {
‘uid’: wx.getStorageSync(‘uid’),
‘token’: wx.getStorageSync(‘token’),
},
success: (res) => {
const data = JSON.parse(res.data.replace(‘\uFEFF’,‘’))
console.log(data)
if (data.bs == ‘success’) {
wx.showToast({
title: data.errmsg,
duration: 2000,
icon: ‘success’
})
successUp++;
// let arr = []
// arr.push(‘https://xxxxx.oss-cn-shenzhen.aliyuncs.com/zhuangshi/zspdf.png’)
let fileType = data.img.split(“.”)[data.img.split(“.”).length - 1]
console.log(fileType,data.img)
if(fileType == ‘pdf’|| fileType == ‘txt’|| fileType == ‘zip’|| fileType == ‘doc’|| fileType == ‘docx’ || fileType == ‘ppt’ || fileType == ‘pptx’ || fileType == ‘xls’ || fileType == ‘xlsx’ ){
that.data.fileList1.push(data.img)
that.setData({
pdfFile:data.img,
fileList1: that.data.fileList1
})
}else if(fileType == ‘jpg’|| fileType == ‘jpeg’ || fileType == ‘png’){
that.data.imgList1.push(data.img)
that.setData({
pdfFile:data.img,
imgList1: that.data.imgList1
})
}else if(fileType == ‘mp4’){
that.data.videoList1.push(data.img)
that.setData({
pdfFile:data.img,
videoList1: that.data.videoList1
})
}
return
that.data.imgList1.push(data.img)
that.setData({
pdfFile:data.img,
imgList1: that.data.imgList1
})
that.data.pdfFile = data.img
// console.log(‘上传图片成功：’, JSON.parse(res.data));
// var data = JSON.parse(res.data);
// console.log(data)
// 把获取到的路径存入imagesurl字符串中
// that.infolist[e].imglist.push(data.img)
// console.log(this.data.imagesurl)
} else if (data.bs == ‘guoqi’) {
wx.showToast({
title: data.errmsg,
duration: 2000,
icon: ‘error’
})
setTimeout(function() {
wx.redirectTo({
url: ‘…/…/pagesD/login/login’
})
}, 500)
} else {
wx.showToast({
title: data.errmsg,
duration: 2000,
icon: ‘error’
})
}

  },
  fail: (res) => {
    failUp++;
  },
  complete: () => {
    i++;
    if (i == length) {
      // Toast('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
    } else { //递归调用uploadDIY函数
      that.uploadDIY(filePaths, successUp, failUp, i, length);
    }
  },
});

},
uploadFileTap(e) {
let that = this;
wx.chooseMessageFile({
count: 10,
type: ‘all’,
success(res) {
console.log(res)
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
// let fileType = tempFilePaths[0].type
// that.setData({
// fileType:fileType
// })
that.uploadDIY( res.tempFiles, 0, 0, 0, res.tempFiles.length,e);
return
wx.uploadFile({
url: ‘https://www.xxx.com/mnp/oaapi/fileupload.php’,
filePath: tempFilePaths[0].path,
name: ‘file’,
formData: {
‘uid’: wx.getStorageSync(‘uid’),
‘token’: wx.getStorageSync(‘token’),
},
success(res) {
const data = JSON.parse(res.data.replace(‘\uFEFF’,
‘’))
console.log(data)
if (data.bs == ‘success’) {
wx.showToast({
title: data.errmsg,
duration: 2000,
icon: ‘success’
})
let arr = []
arr.push(‘https://xxxxx.oss-cn-shenzhen.aliyuncs.com/zhuangshi/zspdf.png’)
that.setData({
pdfFile:data.img,
imgList1:arr
})
that.data.pdfFile = data.img

        } else if (data.bs == 'guoqi') {
          wx.showToast({
            title: data.errmsg,
            duration: 2000,
            icon: 'error'
          })
          setTimeout(function () {
            // wx.removeStorageSync('userInfo'); //清除缓存
            // wx.removeStorageSync('uid')
            // wx.removeStorageSync('token')
            wx.redirectTo({
              url: '../index/index',
            })
          }, 500)
        } else {
          wx.showToast({
            title: data.errmsg,
            duration: 2000,
            icon: 'error'
          })
        }
      }
    })
  }
})

},
/**

  • 生命周期函数–监听页面加载
    */
    onLoad(options) {
    // console.log(cos)
    if (options.id) {
    this.setData({
    id: options.id
    })
    }
    },
    handleItem(e) {
    this.setData({
    itemname: e.detail.value
    })
    },
    handlebeizhu(e) {
    this.setData({
    beizhu: e.detail.value
    })
    },
    handlesave() {
    let that = this
    if (!this.data.itemname) {
    wx.showToast({
    title: ‘请填写项目名称’,
    icon: ‘error’,
    duration: 2000
    })
    return
    }
    wx.showLoading({
    title: ‘保存中…’,
    })
wx.request({
  url: app.globalData.siteurlh5 + '/fileadd.php',
  data: {
    id:this.data.id,
    beizhu:this.data.beizhu,
    uid: wx.getStorageSync('uid'),
    token: wx.getStorageSync('token'),
    title: this.data.itemname,
    img: this.data.videoList1.concat(this.data.fileList1, this.data.imgList1)
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'POST',
  success(res) {
    console.log(res, )
    if (res.data.bs == 'success') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'success'
      })
      setTimeout(() => {
        wx.navigateBack({
          delta: 1,
        })
      }, 2000);
    } else if (res.data.bs == 'failed') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'error'
      })
    } else if (res.data.bs == 'error') {
      wx.showToast({
        title: res.data.errmsg,
        duration: 2000,
        icon: 'error'
      })
    } else if (res.data.bs == 'guoqi') {
      wx.removeStorageSync('userInfo'); //清除缓存
      wx.removeStorageSync('uid')
      wx.removeStorageSync('token')
      wx.redirectTo({
        url: '../index/index',
      })
    }

  },
  fail(err) {
    console.log(err)
    wx
  },
  complete() {
    // wx.hideLoading()
  }
})

},

/**

  • 用户点击右上角分享
    */
    onShareAppMessage() {

}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1241841.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Altium Designer学习笔记11

Altium Designer学习笔记11

画一个LED的封装&#xff1a; 使用这个SMD5050的封装。 我们先看下这个芯片的功能说明&#xff1a; 5050贴片式发光二极管&#xff1a; XL-5050 是单线传输的三通道LED驱动控制芯片&#xff0c;采用的是单极性归零码协议。 数据再生模块的功能&#xff0c;自动将级联输出的数…
阅读更多...
BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）

BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解（学习总结---从入门到深化）

目录 表格二 表单_基础表单 表单_被支持的控件 表单_表单状态 表格二 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑&#xff0c;单元格中的内补&#xff08;padding&#xff09;均会减半 <table class"table table-condensed table-bordered"…
阅读更多...
信创系列之大数据，分布式数据库产业链跟踪梳理笔记…

信创系列之大数据，分布式数据库产业链跟踪梳理笔记…

并购优塾 投行界的大叔&#xff0c;大叔界的投行 【产业链地图&#xff0c;版权、内容与免责声明】1&#xff09;版权&#xff1a;版权所有&#xff0c;违者必究&#xff0c;未经许可不得翻版、摘编、拷贝、复制、传播。2&#xff09;尊重原创&#xff1a;如有引用未标注来源…
阅读更多...
数据结构与算法编程题15

数据结构与算法编程题15

设计一个算法&#xff0c;通过遍历一趟&#xff0c;将链表中所有结点的链接方向逆转&#xff0c;仍利用原表的存储空间。 #include <iostream> using namespace std;typedef int Elemtype; #define ERROR 0; #define OK 1;typedef struct LNode {Elemtype data; …
阅读更多...
Cypress-浏览器操作篇

Cypress-浏览器操作篇

Cypress-浏览器操作篇 页面的前进与后退 后退 cy.go(back); cy.go(-1);前进 cy.go(forward); cy.go(1);页面刷新 cy.reload() cy.reload(forceReload) cy.reload(options) cy.reload(forceReload, options)**options&#xff1a;**只有 timeout 和 log forceReload 是否…
阅读更多...
普通平衡树

普通平衡树

题意&#xff1a;略&#xff0c;题中较清晰。 用二叉查找树来存储数据&#xff0c;为了增加效率&#xff0c;尽量使左子树和右子树的深度差不超过一&#xff0c;这样可以时间控制在logn&#xff0c;效率比较高。 右旋和左旋&#xff0c;目的是为了维护二叉树的操作&#xff0…
阅读更多...
NX二次开发UF_CSYS_ask_matrix_of_object 函数介绍

NX二次开发UF_CSYS_ask_matrix_of_object 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CSYS_ask_matrix_of_object Defined in: uf_csys.h int UF_CSYS_ask_matrix_of_object(tag_t object_id, tag_t * matrix_id ) overview 概述 Gets the matrix identifier atta…
阅读更多...
Sealos 云操作系统私有化部署教程

Sealos 云操作系统私有化部署教程

Sealos 私有云已经正式发布了&#xff0c;它为企业用云提供了一种革命性的新方案。Sealos 的核心优势在于&#xff0c;它允许企业在自己的机房中一键构建一个功能与 Sealos 公有云完全相同的私有云。这意味着企业可以在自己的控制和安全范围内&#xff0c;享受到公有云所提供的…
阅读更多...
Web前端—移动Web第五天（媒体查询、Bootstrap、综合案例-alloyTeam）

Web前端—移动Web第五天（媒体查询、Bootstrap、综合案例-alloyTeam）

版本说明 当前版本号[20231122]。 版本修改说明20231122初版 目录 文章目录 版本说明目录移动 Web 第五天01-媒体查询基本写法书写顺序案例-左侧隐藏媒体查询-完整写法关键词 / 逻辑操作符媒体类型媒体特性 媒体查询-外部CSS 02-Bootstrap简介使用步骤下载使用 栅格系统全局…
阅读更多...
数据库｜TiDB v7.1.0 资源管控功能是如何降低运维难度和成本

数据库｜TiDB v7.1.0 资源管控功能是如何降低运维难度和成本

目录 一、前言 二、资源管控流程图 三、资源管控(Resource Control)测试 &#xff08;一&#xff09;测试集群环境 &#xff08;二&#xff09;Request Unit(RU)概念 &#xff08;三&#xff09;资源管控参数 &#xff08;四&#xff09;评估实际负载所需容量 &#xff…
阅读更多...
vue项目引入element-plus

vue项目引入element-plus

文章目录 引入框架遇到的问题引入的时候&#xff0c;报错 ...(reading replace)...报错&#xff1a;The template root requires ...eslint报错&#xff1a; 运行 引入框架 使用add引入 遇到的问题 引入的时候&#xff0c;报错 …(reading ‘replace’)… Cannot read prop…
阅读更多...
Navicat 技术指引 | 适用于 GaussDB 的数据迁移工具

Navicat 技术指引 | 适用于 GaussDB 的数据迁移工具

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…
阅读更多...
git本地账户如何从一台电脑迁移到另外一台

git本地账户如何从一台电脑迁移到另外一台

为了表述方便&#xff0c;我们此处用旧电脑、新电脑指代。 在新电脑上安装git 例如&#xff0c;我旧电脑上安装的git版本是2.33.1版本&#xff0c;新电脑安装git的版本是2.43.0&#xff0c;这不妨碍迁移。 将git的全局配置文件从旧电脑拷贝到新电脑 Git的全局配置文件&…
阅读更多...
el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)

el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)

&#xff08;1&#xff09;表格排序 &#xff08;2&#xff09;简单的table导出功能&#xff08;需要后台支撑&#xff09;必须要有iframe &#xff08;3&#xff09;页面所有代码&#xff1a; <template><div class"mainContainer"><el-form:model&…
阅读更多...
Selenium安装WebDriver最新Chrome驱动（114以后的版本）

Selenium安装WebDriver最新Chrome驱动（114以后的版本）

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…
阅读更多...
都被“锟斤拷”毒害过，那么究竟是为什么会出现这些奇怪的字符？

都被“锟斤拷”毒害过，那么究竟是为什么会出现这些奇怪的字符？

不管是在工作中还是生活中&#xff0c;都被“锟斤拷”毒害过&#xff0c;比如这样&#xff1a; 或者这样&#xff1a; 还有这样&#xff1a; 那么究竟是为什么会出现这些奇怪的字符&#xff1f; ASCII编码 在计算机底层都是用0和1进行存储的&#xff0c;ASCII编码将所有的字母…
阅读更多...
oracle数据库巡检常见脚本-系列二

oracle数据库巡检常见脚本-系列二

简介 作为数据库管理员&#xff08;DBA&#xff09;&#xff0c;定期进行数据库的日常巡检是非常重要的。以下是一些原因&#xff1a; 保证系统的稳定性&#xff1a;通过定期巡检&#xff0c;DBA可以发现并及时解决可能导致系统不稳定的问题&#xff0c;如性能瓶颈、资源利用率…
阅读更多...
Navicat 技术指引 | 适用于 GaussDB 的备份与还原功能

Navicat 技术指引 | 适用于 GaussDB 的备份与还原功能

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…
阅读更多...
Linux反弹SHell与检测思路

Linux反弹SHell与检测思路

免责声明 文章仅做经验分享用途，利用本文章所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任，一旦造成后果请自行承担！！！ 反弹shell payload在线生成 https://www.chinabaiker.com/Hack-Tools/ Online - Reverse Shell G…
阅读更多...
C++基础从0到1入门编程（四）类和对象

C++基础从0到1入门编程（四）类和对象

系统学习C 方便自己日后复习&#xff0c;错误的地方希望积极指正 往期文章&#xff1a; C基础从0到1入门编程&#xff08;一&#xff09; C基础从0到1入门编程&#xff08;二&#xff09; C基础从0到1入门编程&#xff08;三&#xff09; 参考视频&#xff1a; 1.黑马程序员匠心…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023