使用uni-file-picker上传文件（图片）到腾讯云存储COS步骤-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用uni-file-picker上传文件（图片）到腾讯云存储COS步骤。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序上传文件到腾讯云存储COS：

准备步骤：

1.拿到腾讯云的API密钥：在API密钥管理中获取SecretId和SecretKey，没有的话生成一个

2.开通COS存储创建存储桶，需要拿到存储桶名字和所在地域

3.打开对象存储的产品文档进入SDK文档里的小程序SDK里面有源码下载地址

使用uni-file-picker上传文件（图片）到腾讯云存储COS步骤

主要是为了下载这个cos-wx-sdk-v5.js文件复制到你的项目里，在使用页面里面导入

嫌麻烦的话可以去网上找一样的

或者用npm安装：npm install cos-wx-sdk-v5

在页面导入：import COS from 'cos-wx-sdk-v5'

对象操作这里面有相关的方法

使用uni-file-picker 代码部分：

<template>
	<view>
		<uni-file-picker v-model="imageValue" limit="6" fileMediatype="image" mode="grid" @select="select"
			@delete="delImage" />
	</view>
</template>

上传方法代码：(不能格式化看着别扭)

imageValue数组里的格式要是对象里面是上传成功返回的图片地址{url:'******'}

删除操作就是根据上传时候配置的key字段进行删除

import COS from '@/utils/cos-wx-sdk-v5.js'
export default {
data() {
	return {
		imageValue: [],
};
},

			methods: {
				// 获取上传状态
				select(e) {
					var that = this
					const cos = new COS({
						SecretId: 'AKIDnX9b*********qwPefU6D5', // 获取的密钥id
						SecretKey: 'kIfojPq3*********yzoQp35tWv6', // 获取的密钥key
					});
					console.log('选中', e);
					var filePathList = e.tempFilePaths;
					filePathList.forEach((item, index) => {
						const pathName = that.getRandomString() + '.png'

						// 微信小程序
						cos.uploadFile({ //putObject
								Bucket: '****-131***0991', // 填入您自己的存储桶，必须字段
								Region: 'ap-beijing', // 存储桶所在地域，例如ap-beijing，必须字段
								Key: pathName, // 上传的cos时，起一个别名
								FilePath: item, // 要上传的文件
								SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须
							},
							function(err, data) {
								console.log(index, err || data);
								if (err) return
								that.imageValue.push({
									url: data.headers.location,
									name: pathName
								})
							})

					})
				},
				delImage(e) {
					const delkey = e.tempFile.name
					const cos = new COS({
						SecretId: 'AKIDnX9bpoa8***********EMFwPefU6D5', // 获取的密钥id
						SecretKey: 'kIfojPq33rQ************Qp35tWv6', // 获取的密钥key
					});
					// 删除操作
					cos.deleteObject({
						Bucket: '***-1314*****91', // 填入您自己的存储桶，必须字段
						Region: 'ap-beijing', // 存储桶所在地域，例如ap-beijing，必须字段
						Key: delkey, // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
					}, function(err, data) {
						console.log(err || data);
					});
				}
			}
}

getRandomString方法是一个随机生成字符串的方法，网上找的

getRandomString(len) {
				let _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789',
					min = 0,
					max = _charStr.length - 1,
					_str = ''; //定义随机字符串 变量
				//判断是否指定长度，否则默认长度为15
				len = len || 15;
				//循环生成字符串
				for (var i = 0, index; i < len; i++) {
					index = (function(randomIndexFunc, i) {
						return randomIndexFunc(min, max, i, randomIndexFunc);
					})(function(min, max, i, _self) {
						let indexTemp = Math.floor(Math.random() * (max - min + 1) + min),
							numStart = _charStr.length - 10;
						if (i == 0 && indexTemp >= numStart) {
							indexTemp = _self(min, max, i, _self);
						}
						return indexTemp;
					}, i);
					_str += _charStr[index];
				}
				return _str;
			},

如果上传成功之后返回的地址访问不了，可能是存储桶权限的问题

应该是这个报错：This XML file does not appear to have any style information associated with it. The document tree is shown below.

私有读写改为公有读私有写就行了

记得不校验合法域名、web view (业务域名)TLS版本以及HTTPS证书

使用uni-file-picker上传文件（图片）到腾讯云存储COS步骤