uniapp图片上传与展示

uniapp 图片 上传 阿里 OSS 对象存储

H5移动端开发中需要用户上传图片头像、身份证件等需求时。需要将图片上传至阿里oss中存储&＃xff0c;并且下载到当前页面进行展示。

代码如下&＃xff1a;

需要用到的依赖包&＃xff1a;

npm install ali-oss --save


npm install lrz --save


创建一个 upload.js 文件&＃xff1a;

const OSS &＃61; require("ali-oss"); //引入安装包&＃xff1b;
const lrz &＃61; require(&＃39;lrz&＃39;);//配置 阿里 oss 存储对应的 bucket 桶
var client &＃61; new OSS({region: "oss-cn-beijing", //指申请OSS服务时的地域endpoint: "https://oss-cn-beijing.aliyuncs.com", //指定为HTTPS&＃xff0c;也可以是IP的形式 region将会被忽略accessKeyId: "xxxxxxxxxxxxxxxxxx", // 填写你的accessKeyIdaccessKeySecret: "xxxxxxxxxxxxxxxxxxxxx", // 填写你的accessKeySecretbucket: "xxxx", // 桶的名称secure: true // 配合region使用。如果指定secure为true&＃xff0c;则使用HTTPS访问。
});// 阿里云上传图片// e : 文件对象&＃xff0c;filename&＃xff1a;存储文件名&＃xff0c;tag&＃xff1a;识别当前事件的种类&＃xff0c;配合fn使用&＃xff0c;imgpath&＃xff1a;图片路径&＃xff0c;fn&＃xff1a;回调函数export function uploadImg(e, filename, tag, imgpath, fn) {uni.showLoading({title: &＃39;正在上传...&＃39;});if (e.tempFiles.length &＃61;&＃61; 0) {uni.hideLoading();uni.showToast({title:&＃39;未找到图片&＃39;,icon:&＃39;none&＃39;})};// 检测图片大小let file &＃61; e.tempFiles[0];if (file.size > 15728640) { // 15M uni.showToast({title: "您上传的图片文件过大&＃xff0c;请重新上传&＃xff01;",icon: "none"});return false}lrz(file, {width: 500,}).then(function(res) {let base64 &＃61; res.base64;let blob &＃61; convertBase64UrlToBlob(base64);let r &＃61; Math.random().toString(16).substr(2);let time &＃61; new Date(),y, m, d;y &＃61; time.getFullYear();m &＃61; String(time.getMonth() &＃43; 1).length &＃61;&＃61;&＃61; 2 ? (time.getMonth() &＃43; 1) : "0" &＃43; (time.getMonth() &＃43; 1);d &＃61; String(time.getDate()).length &＃61;&＃61;&＃61; 2 ? (time.getDate()) : "0" &＃43; time.getDate();let dfilefold &＃61; y &＃43; m &＃43; d; // 创建时间文件夹let name;if (imgpath.indexOf(filename) !&＃61; -1) {let tmps &＃61; imgpath.split(filename)[1].split(&＃39;?&＃39;)[0]; // 获取时间戳name &＃61; filename &＃43; tmps;} else {name &＃61; filename &＃43; dfilefold &＃43; &＃39;/&＃39; &＃43; r;}// 上传图片client.put(name, blob).then(result &＃61;> {// 上传成功 &＃xff1b;uni.hideLoading();// 得到图片在oss中的url地址&＃xff1b;let path &＃61; result.url;fn(tag, path);}).catch(err &＃61;> {console.log(err)uni.showToast({title: "图上传失败&＃xff0c;请重试&＃xff01;",icon: "none"})});})
}// 辅助函数
function convertBase64UrlToBlob(urlData) {var bytes &＃61; window.atob(urlData.split(&＃39;,&＃39;)[1]); //去掉url的头&＃xff0c;并转换为byte//处理异常,将ascii码小于0的转换为大于0var ab &＃61; new ArrayBuffer(bytes.length);var ia &＃61; new Uint8Array(ab);for (var i &＃61; 0; i < bytes.length; i&＃43;&＃43;) {ia[i] &＃61; bytes.charCodeAt(i);}return new Blob([ab], {type: &＃39;image/png&＃39;});
};

在uniapp 项目组件中

<template><view><view><image class&＃61;"" :src&＃61;"idImage1" mode&＃61;"aspectFit" v-if&＃61;"idImage1">image><text class&＃61;"" style&＃61;"font-size: 100rpx;"&＃64;tap&＃61;"uploadImgfn(&＃39;myImage/&＃39;, 1, idImage1)" v-else />view><view><image class&＃61;"" :src&＃61;"idImage1" mode&＃61;"aspectFit" v-if&＃61;"idImage2">image><text class&＃61;"" style&＃61;"font-size: 100rpx;"&＃64;tap&＃61;"uploadImgfn(&＃39;myImage/&＃39;, 2, idImage2)" v-else />view>......view>
template>


<script>// 引入方法&＃xff1b;import {uploadImg} from "../../../utils/upload.js";data() {return {idImage1: " ", // 图片1idImage2:&＃39;&＃39; &＃39;&＃39;, // 图片2idImage3:&＃39;&＃39; &＃39;&＃39;, // 图片3};},methods&＃xff1a;{uploadImgfn(filename, tag, imgpath) {let that &＃61; this;// 选择图片uni.chooseImage({success: (res) &＃61;> {console.log(res);// 调用方法&＃xff0c;上传图片uploadImg(res, filename, tag, imgpath, function(tag, path) {// 展示上传的图片if (tag &＃61;&＃61; 1) {that.idImage1 &＃61; path &＃43; "?" &＃43; Date.now();} else if (tag &＃61;&＃61; 2) {that.idImage1 &＃61; path &＃43; "?" &＃43; Date.now();} else if (tag &＃61;&＃61; 3) {that.idImage3 &＃61; path &＃43; "?" &＃43; Date.now();}})}});},}
</script>


感兴趣的小伙伴可以尝试一下封装成Promise对象&＃xff0c;这样就用传递回调函数fn&＃xff0c;也不用传递tag参数。在.then&＃xff08;&＃xff09;就可以给idImage进行赋值 url

有更好、更加简洁的方法希望大家能给我提出宝贵的意见或链接。