一、uni中选择图片的方法与uview中的upload组件选择的不同
-
功能差异：
uni.chooseImage是uni-app框架提供的原生API，用于选择本地相册或拍照获取图片。uview中的upload组件是一个UI组件，用于上传图片或文件到服务器。
-
调用方式：
uni.chooseImage需要在代码中主动调用API来触发选择图片的操作。uview的upload组件是一个UI组件，需要在页面中引入并配置参数，然后通过用户交互来触发选择图片的操作。
-
上传功能：
uni.chooseImage只能选择图片，需要额外编写代码来实现图片上传功能。uview中的upload组件集成了上传功能，可以直接上传选择的图片或文件到服务器。
二、upload的简单使用（详细看uView的官网Upload 上传 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)）
<template> <u-upload :action="action" :file-list="fileList" ></u-upload></template><script> export default { data() { // 演示地址，请勿直接使用 action: 'http://www.example.com/upload', fileList: [ { url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg', } ] } }</script>也可以设置手动上传
<template> <view> <u-upload ref="uUpload" :action="action" :auto-upload="false" ></u-upload> <u-button @click="submit">提交</u-button> </view></template><script> export default { data() { // 非真实地址 action: 'http://www.example.com/upload', }, methods: { submit() { this.$refs.uUpload.upload(); }, } }</script>三、用uniapp的方法实现选择图片并上传腾讯云
1.下载cos
npm i cos-js-sdk-v5 --save2.生成签名
获取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-b059e0ef33d1 let 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 = this return new Promise((resolve, reject) => { let xhr = null if (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.response let 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方法选择的图片路径需要经过处理才能上传云
<view class="jiantou2"> <u-icon name="more-dot-fill" color="white" @click="morefuck"></u-icon> </view>import { Upload, Delete, parseFile } from '@/store/upload.js'; const morefuck = async () => { console.log("想要获取图片"); uni.chooseImage({ count: 1, //上传图片的数量，默认是9 sizeType: ['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': '<Signature>', 'Content-Type': 'image/jpeg', 'Region': 'ap-nanjing', 'Bucket': 'link-******************', 'SecretId': '**********************', // 'Timestamp': '<Timestamp>', // 'Nonce': '<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的方法选择图片并且将图片做处理然后上传到腾讯云上
