一、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的方法选择图片并且将图片做处理然后上传到腾讯云上