淘宝网站建设可行性分析报告,做公司网站的费用计入什么科目,如何绑定网站,广州企业网站设计方案uniappH5实现 阿里云OSS上传视频
示例图#xff1a; 上传视频完整示例代码#xff1a;
使用npm安装SDK开发包#xff0c;安装命令为
npm install ali-oss --save
accessKeyId 和 accessKeySecret 还有 bucket 替换成你的就行。
multipartUpload 的第一个入参是#x…uniappH5实现 阿里云OSS上传视频
示例图 上传视频完整示例代码
使用npm安装SDK开发包安装命令为
npm install ali-oss --save
accessKeyId 和 accessKeySecret 还有 bucket 替换成你的就行。
multipartUpload 的第一个入参是 文件路径 文件名称
第二个入参是文件对象
templateview classquiz!-- view classtitle title3上传/view --!-- 添加图片 --view classmainAddpicp classaddPicspan选择视频/span/pview classThreePicvideo v-iflocVideoUrl :srclocVideoUrl classadd1/video!-- image classaddPic1 v-else src/static/upImg.png clickaddPic / --img v-else classpicMore clickaddPic() src/static/upImg.png //view/viewview classbtn clickupbtn()上传保存/view/view
/templatescriptimport OSS from ali-ossimport uploadFile from /util/uploadFile;var that;export default {data() {return {delet: https://oss.xxx.com.cn/web/tempProject/applyClosed.png,addImg: https://oss.xxx.com.cn/web/tempProject/addImg.png,quiz_upImg: https://oss.xxx.com.cn/web/tempProject/quiz_upImg.png,locVideoUrl: ,};},onLoad() {that this;},methods: {// 添加addPic(e) {uni.chooseVideo({sourceType: [camera, album],success: (res) {console.log(chooseVideo-res, res);this.locVideoObj res.tempFilethis.locVideoUrl res.tempFilePath;console.log(locVideoUrl, this.locVideoUrl);}});},async upbtn() {uni.showLoading({title:上传中···})const client new OSS({// yourregion填写Bucket所在地域。以华东1杭州为例Region填写为oss-cn-hangzhou。region: oss-cn-shanghai,// 从STS服务获取的临时访问密钥AccessKey ID和AccessKey Secret。accessKeyId: LTAI5tF59uyDCJxxxxxxxKD5,accessKeySecret: M5or7KKsHm2RxxxxxxxxxxCjeyQT,// 从STS服务获取的安全令牌SecurityToken。// 填写Bucket名称例如examplebucket。bucket: xxxx-pap,});const progress (p, _checkpoint) {// Object的上传进度。console.log(p);// 分片上传的断点信息。console.log(_checkpoint);};const headers { // 指定Object的存储类型。x-oss-storage-class: Standard, // 指定Object标签可同时设置多个标签。//x-oss-tagging: Tag11Tag22, // 指定初始化分片上传时是否覆盖同名Object。此处设置为true表示禁止覆盖同名Object。x-oss-forbid-overwrite: true}const result await client.multipartUpload(meetingminu/${this.locVideoObj.name}, this.locVideoObj, {progress,// headers,// 指定meta参数自定义Object的元信息。通过head接口可以获取到Object的meta数据。meta: {year: 2020,people: test,},});console.log(result, result);// 填写Object完整路径例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。const head await client.head(meetingminu/${this.locVideoObj.name});console.log(head, head);uni.hideLoading()uni.showToast({title:上传成功})setTimeout((){uni.reLaunch({url:/pages/index/index})},1500)},}};
/scriptstyle langscss scoped.quiz {margin: 36rpx;position: relative;color: #102841;padding-bottom: 180rpx;.mainAddpic {width: 100%;padding: 40rpx 28rpx 50rpx;border-radius: 20rpx;margin-bottom: 20rpx;box-sizing: border-box;.ThreePic {display: flex;// justify-introduce: space-around;flex-wrap: wrap}.addPic {width: 100%;padding-left: 10rpx;padding-bottom: 10rpx;border-bottom: 1px solid #E5F1FF;span:nth-child(1) {font-family: PingFangSC-Medium, PingFang SC;font-size: 28rpx;color: grey;font-weight: bold;}span:nth-child(2) {font-size: 24rpx;color: #999;}}.picMore {width: 170rpx;height: 170rpx;border-radius: 8rpx;display: flex;margin: 30rpx auto 10rpx;position: relative;// border: 1px dashed #ccc;image {width: 88rpx;height: 88rpx;margin: 0 auto;}.add1 {width: 186rpx;height: 186rpx;border-radius: 8rpx;}.delete {position: absolute;right: 0;top: 0;z-index: 2;width: 40rpx;}.addPic1 {width: 60rpx;height: 60rpx;}}}.quiz_upImg {width: 212rpx;height: 212rpx;position: relative;left: 50%;margin-left: -106rpx;margin-top: 40rpx;}.title {// height: 100rpx;position: relative;font-size: 34rpx;font-family: Source Han Sans CN;font-weight: 500;}.title2 {margin-top: 80rpx;}.title3 {margin-top: 60rpx;}textarea {width: 83.8vw;}.xuanzhe {width: 83.8vw;position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);.rrr {width: 12rpx;height: 22rpx;position: absolute;right: 30rpx;margin-top: 10rpx;z-index: 3;}}textarea {position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);}.textarea1 {height: 70rpx;}.textarea2 {margin-top: 26rpx;height: 200rpx;}.btn {position: relative;margin: auto;margin-top: 34rpx;border-radius: 10rpx;height: 70rpx;line-height: 70rpx;width: 220rpx;left: 50%;margin-left: -110rpx;background-color: #102841;color: #fff;font-size: 32rpx;text-align: center;}.list {margin-top: 40rpx;.item {width: 90%;padding-bottom: 0rpx;min-height: 80rpx;background: #FFFFFF;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);border-radius: 12rpx;margin: auto;position: relative;margin-bottom: 28rpx;.red_point {margin-top: -6rpx;margin-right: 14rpx;width: 16rpx;height: 16rpx;border-radius: 50%;background-color: red;position: absolute;right: 4rpx;}.txt {line-height: 96rpx;// height: 36rpx;font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 500;color: #102841;margin-left: 30rpx;width: 470rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}}
/style
