用小程序中的uni方法实现uView中的upload组件并将图片上传到腾讯云

一、uni中选择图片的方法与uview中的upload组件选择的不同

1. 功能差异：

   • uni.chooseImage是uni-app框架提供的原生API，用于选择本地相册或拍照获取图片。
   • uview中的upload组件是一个UI组件，用于上传图片或文件到服务器。

2. 调用方式：

   • uni.chooseImage需要在代码中主动调用API来触发选择图片的操作。
   • uview的upload组件是一个UI组件，需要在页面中引入并配置参数，然后通过用户交互来触发选择图片的操作。

3. 上传功能：

   • uni.chooseImage只能选择图片，需要额外编写代码来实现图片上传功能。
   • uview中的upload组件集成了上传功能，可以直接上传选择的图片或文件到服务器。

二、upload的简单使用（详细看uView的官网Upload 上传 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)）

export default {data() {// 演示地址，请勿直接使用action: 'http://www.example.com/upload',fileList: [{url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',}]}}

也可以设置手动上传

提交export default {data() {// 非真实地址action: 'http://www.example.com/upload',},methods: {submit() {this.$refs.uUpload.upload();},}}

三、用uniapp的方法实现选择图片并上传腾讯云

1.下载cos

npm i cos-js-sdk-v5 --save

2.生成签名

获取secretId和secretKey

let cos = new COS({SecretId: '*******************************',SecretKey: '******************************',})

3.上传文件

cos.uploadFile({Bucket: 'link-******',/* 填写自己的 bucket，必须字段*/Region: 'ap-nanjing',/* 存储桶所在地域，必须字段 */Key: filename,/* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */Body: selectedFile, // 上传文件对象SliceSize: 1024 * 1024 * 5,/* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */onProgress: function(progressData) {console.log(JSON.stringify(progressData));}}, function(err, data) {if (err) {console.log('上传失败', err);} else {console.log('上传成功');}});

4.配置cos

四、完整代码

1.新建upload.js文件

import COS from 'cos-js-sdk-v5';//上传图片export function Upload(selectedFile, filename) {console.log(selectedFile, filename);let cos = new COS({SecretId: '**********************',SecretKey: '*********************',})cos.uploadFile({Bucket: 'link-************',/* 填写自己的 bucket，必须字段*/Region: 'ap-nanjing',/* 存储桶所在地域，必须字段 */Key: filename,/* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */Body: selectedFile, // 上传文件对象SliceSize: 1024 * 1024 * 5,/* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */onProgress: function(progressData) {console.log(JSON.stringify(progressData));}}, function(err, data) {if (err) {console.log('上传失败', err);} else {console.log('上传成功', data);}});}//删除图片export function Delete(filename) {console.log(filename);// 找到最后一个斜杠的索引const lastIndex = filename.lastIndexOf('/');// 提取最后一个斜杠后面的字段const lastSegment = filename.substring(lastIndex + 1);console.log(lastSegment); // 输出: 289f83ec-cf17-47f1-bd99-b059e0ef33d1let cos = new COS({SecretId: 'AKIDz6FIRWTHsGg7TfvDXvFdu6OXg2Z9pbWS',SecretKey: '9KbnwwnV2dGoMsgQ1eFh2H4reVEnAMSK',})cos.deleteObject({Bucket: 'link-1320976986',/* 填写自己的 bucket，必须字段*/Region: 'ap-nanjing',/* 存储桶所在地域，必须字段 */Key: lastSegment,/* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */}, function(err, data) {if (err) {console.log('上传失败', err);} else {console.log('上传成功', data);}});}// 转换文件格式export const parseFile = (src, name) => {// console.log("转换格式");//let that = thisreturn new Promise((resolve, reject) => {let xhr = nullif (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('GET', src, true)xhr.responseType = 'blob';xhr.onload = function(e) {if (this.status == 200) {let myBlob = this.responselet files = new window.File([myBlob],name, {type: myBlob.type}) // myBlob.type 自定义文件名resolve(files)console.log("resolve(files)");} else {reject(false)console.log("reject(false)");}}xhr.send()})}

2.使用

注意：用uni.chooseimage方法选择的图片路径需要经过处理才能上传云

import {Upload,Delete,parseFile} from '@/store/upload.js';const morefuck = async () => {console.log("想要获取图片");uni.chooseImage({count: 1, //上传图片的数量，默认是9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: async (res) => {console.log(res);const tempFilePath = res.tempFilePaths[0]; //拿到选择的图片，是一个数组const file = {url: tempFilePath, // 临时文件路径name: tempFilePath.substring(tempFilePath.lastIndexOf('/') +1) // 提取文件名};console.log(file.name, "key的值");uni.uploadFile({url: '****************************',filePath: tempFilePath,name: 'file',formData: {'key': file.name,'success_action_status': '200',// 'Signature': '','Content-Type': 'image/jpeg','Region': 'ap-nanjing','Bucket': 'link-******************','SecretId': '**********************',// 'Timestamp': '',// 'Nonce': '',},success: function(uploadRes) {console.log('upload success', uploadRes)},fail: function(uploadRes) {console.log('upload fail', uploadRes)},complete: function(uploadRes) {console.log('upload complete', uploadRes)}})const finalurl ="url" + file.name;totalmition.value.avatar = finalurl;putUser(totalmition.value).then(data => {oldtouxiang.value = totalmition.value.avatar;})// 转换格式// let blob = await parseFile(file.url, file.name);// 上传到腾讯云// Upload(blob, file.name);//删除老头像// console.log(oldoldtouxiang.value, "删除老头像");// Delete(oldoldtouxiang.value);}});};

这样就能用uni.chooseimage的方法选择图片并且将图片做处理然后上传到腾讯云上