前端图片或文件上传到oss
参考链接：https://ext.dcloud.net.cn/plugin?id=13540
根据需求获取需要的AccessKey ID和AccessKey Secret等必要信息！
uniapp提供几种选择
选择图片：uni.chooseImage 方法限制只能选取图片，限.jpg等，从本地相册选择图片或使用相机拍照
选择视频：uni.chooseVideo 方法限制只能选取视频，限.mp4等视频文件，拍摄视频或从手机相册中选视频，返回视频的临时文件路径
uni.chooseMedia 可以选取图片和视频，但兼容性比较差，拍摄或从手机相册中选择图片或视频
选取文件：uni.chooseFile 方法可以选择文件 兼容性比较好，从本地选择文件
上传到oss：
引入插件jason-alioss-upload到hbuilder项目中，在目标文件中引入
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'；
点击上传触发uploadImg（num,index）方法
uploadImg(num, index) {
uni.chooseFile({
count: 1,
sourceType:['album','camera'],
success: async (file) => {
const { success, data } = await ossUpload(
file.tempFilePaths[0],
file.tempFiles[0].path,
'agentImg/'
)
if (success) {
// state.headImage = data
if (num == 1) {
// num = 1 门店主图
// this.storeData.picture = JSON.parse(data).data.url;
// 图片地址
this.storeData.picture = data;
// 是否修改过图片
this.is_upload = true;
//用来显示本地或者反显图片
this.img = data;
} else if (num == 2) {
// 店内环境
// let picUrl = JSON.parse(data).data.url;
let picUrl = data;
// console.log(data,'查看data')
//用来显示本地图片列表或者反显图片列表
// console.log(this.storeData,'this.storeData')
let ptLogo = this.storeData.img;
try {
ptLogo = JSON.parse(ptLogo);
} catch (e) {
//TODO handle the exception
}
if (index === 0 || index) {
ptLogo.splice(index, 1, picUrl);
} else {
ptLogo.push(picUrl);
}
this.storeData.img = ptLogo;
} else if (num == 3) {
// 二维码图片
let wxQrCode = data;
this.storeData.code = wxQrCode
} else if (num == 4) {
// 资质图片
let apituImg = this.storeData.businessLicense;
// let picImg = JSON.parse(data).data;
let picImg = data;
if (index === 0 || index) {
apituImg.splice(index, 1, picImg);
} else {
apituImg.push(picImg);
}
this.storeData.businessLicense = apituImg
} else if (num == 5) {
// console.log(data,'data')
// let logo = JSON.parse(data).data.url;
//门店logo图
let logo = data;
this.storeData.log = logo;
// uni.showToast({
// icon: 'success',
// title: '上传成功'
// })
}
this.$forceUpdate()
} else {
uni.showToast({
icon: 'none',
title: data
})
}
},
complete: (res) => {
console.log(res,'00009999')
}
})
}
这里使用uni.chooseFile方法获取本地的文件，在使用引入的ossUpload 方法上传文件到oss
页面之中有几处涉及到上传，这边写死，用num控制是那个位置触发的上传事件。
