> 文档中心 > uniapp 小程序开发,实现图片直传阿里云的简单方法

uniapp 小程序开发,实现图片直传阿里云的简单方法

借用uniapp官方的第三方组件uni-file-picker和插件市场的已经封装好的插件yushijie-ossutil就能简单实现 下载链接:阿里云oss文件直传-无需后台签名 - DCloud 插件市场

一、在要使用的页面引入

import uploadImage from "../../common/ossutil/uploadFile.js";

在config.js文件去修改成自己的信息

var fileHost = '';//你的阿里云地址最后面跟上一个/   在你当前小程序的后台的uploadFile 合法域名也要配上这个域名var config = {   //aliyun OSS config  uploadImageUrl: `${fileHost}`, // 默认存在根目录,可根据需求改  AccessKeySecret: '', // AccessKeySecret 去你的阿里云上控制台上找  OSSAccessKeyId: '',  // AccessKeyId 去你的阿里云上控制台上找   timeout: 87600 //这个是上传文件时Policy的失效时间};module.exports = config

 二、在uni-file-picker添加select事件(用于选择图片时触发上传图片到阿里云,删除是delete)具体看官方文档

//每次点击选择调用阿里云文件上传async select(e) {console.log("选择图片成功", e)e.tempFiles.forEach((i) => {let file = i.path;uploadImage(file, "cbb/",result => {//将上传后的图片以对象(官方要求的格式)的形式存入uni-file-picker的value值imageValue(imageValue值的结构为数组包对象)用于图片回显let objAge = {'url': result,'extname': 'png','name': 'imgss.png'};this.imageValue.push(objAge)uni.hideLoading();}, result => {uni.showToast()})});},

 这样就能实现图片上传阿里云,欢迎大佬指正!