项目场景：

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

需求描述：

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

解决方案：

代码如下：

需要用到的依赖包：

npm install ali-oss --save

npm install lrz --save

创建一个 upload.js 文件：

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

在uniapp 项目组件中

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

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

优化部分

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

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

uniapp 图片上传与展示相关推荐

jsp/html页面图片上传并展示上传的图片
之前做过一个项目,有一个功能是图片上传并且展示图片,尝试过其他的方法,但会有一个问题,那就是在IE8上图片并不能正常展示,所以便用以下方法来上传图片,很好的解决了此问题,步骤如下: 1.上传图片页面i ...
uniapp 图片上传删除
uniapp我的示例:如下点击加号图片:选择上传类型:图片或者文件上传的图片可以删除这是界面上的一系列操作,接下来我们来看如何代码实现吧一.界面代码:展示图片 <view class=& ...
uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件
uniapp文件上传组件,支持图片.视频上传 html部分: <template><view class="annex-wrap"><view cla ...
uni-app 图片上传七牛云
前台uni-app+colorUi 后台jeecgboot 思路用colorui能实现效果,但是路径还是指向本地用七牛云,先上传到七牛云,返回路径并且指向它后台去获取七牛token并且返回(最后 ...
uniapp图片上传与压缩，兼容小程序与H5
图片上传借助了Uview2.0的组件 <u-upload :fileList="imgs" :name="" @afterRead="after ...
uniapp 图片上传插件使用说明
插件地址:https://ext.dcloud.net.cn/plugin?id=4589 使用说明本插件是一个云端上传插件,能够将本地的文件包括图片上传到云存储,ImageX是火山引擎推出的专业图 ...
uniapp图片上传组件
 <template><view><view class="content"><view class=&q ...
uni-app图片上传（位置固定）
我这里是根据sunui-uping插件改造而来的,需求是我有一些固定位置的图片要上传,看下下面的截图效果,就知道了: 样式的话使用了colorui的样式,其实就是按钮那里用了colorui的按钮.完整 ...
uni-app 图片上传实战
uni.uploadFile()将本地资源上传到开发者服务器客户端发起一个post请求content-type multipart/form-data 通过uni.chooseImage获取一个本地资 ...

uniapp 图片上传与展示

项目场景：

需求描述：

解决方案：

优化部分

uniapp 图片上传与展示相关推荐

最新文章

热门文章