uniapp 全局添加图片 oss 或 网站域名 前缀

在main.js中定义了一个Vue.prototype.$getImgUrl函数,用于检查图片URL是否已包含HTTP。如果URL是网络地址,则直接返回,否则添加配置的ossUrl作为前缀,将相对路径转换为远程图片。
摘要由CSDN通过智能技术生成

在main.js 里添加如下代码:

// 图片前缀
Vue.prototype.$getImgUrl = function(imgUrl) {
    if(imgUrl){
        var newStr = imgUrl.indexOf("http")
        if (imgUrl.indexOf("http") !== -1) {
            return imgUrl
        } else {
            return config.ossUrl + imgUrl || ''
        }
    }    
}

在调用的页面调用方法

this.$getImgUrl('图上路径')

该方法自动判断是否已是远程图片,如果已经是网络上的图片则不会再添加域名,如果是相对路径的图片则会自动添加域名前缀,变成远程图片。

UniApp 中实现将图片上传至 OSS(对象存储服务)的功能,你可以使用uni-app插件`uni.uploadFile`来实现。 首先,你需要将 OSS 的配置信息设置好,包括 `accessKeyId`、`accessKeySecret`、`bucket`、`region` 等信息。你可以将这些信息保存在配置文件中或者通过接口获取。 然后,在页面中添加一个按钮,用于触发选择图片和上传功能: ```html <template> <view> <button @click="chooseAndUpload">选择图片并上传</button> </view> </template> ``` 接下来,在页面的对应的 Vue 实例中,定义 `chooseAndUpload` 方法来触发选择图片和上传: ```javascript <script> export default { methods: { chooseAndUpload() { uni.chooseImage({ count: 1, success: (res) => { const tempFilePaths = res.tempFilePaths this.uploadImage(tempFilePaths[0]) }, }) }, uploadImage(filePath) { uni.uploadFile({ url: 'https://your-oss-endpoint', // 替换为你的 OSS 上传地址 filePath, name: 'file', formData: { key: 'your-oss-key', // 替换为你的 OSS 对象存储路径和文件名 policy: 'your-oss-policy', // 替换为你的 OSS 上传策略 OSSAccessKeyId: 'your-access-key-id', // 替换为你的 OSS AccessKeyId signature: 'your-oss-signature', // 替换为你的 OSS 签名 success_action_status: '200', // 上传成功的状态码 }, success: (res) => { console.log(res.data) // 上传成功后的响应数据 }, }) }, }, } </script> ``` 在 `chooseAndUpload` 方法中,我们使用 `uni.chooseImage` 方法来选择一张图片,然后将选中的图片路径传递给 `uploadImage` 方法进行上传。在 `uploadImage` 方法中,我们使用 `uni.uploadFile` 方法来实现图片上传功能。 注意替换 `https://your-oss-endpoint` 为你的 OSS 上传地址,并填充相应的 OSS 配置信息。 这样,当点击页面中的按钮后,就会触发选择图片并上传至 OSS 的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值