542 lines
13 KiB
Vue
542 lines
13 KiB
Vue
<template>
|
||
<view class="ali-oss-uploader">
|
||
<view class="preview-container" :style="'width:'+width">
|
||
<!-- 预览区域 -->
|
||
<view v-if="accept == 'image/*'" class="preview-container" :style="'width:'+width">
|
||
<view
|
||
v-for="(file, index) in fileList"
|
||
:key="index"
|
||
class="preview-item"
|
||
>
|
||
<image
|
||
:src="file"
|
||
class="preview-image"
|
||
mode="aspectFill"
|
||
@click="handlePreview(index)"
|
||
/>
|
||
<view v-if="deletable" class="delete-icon" @click.stop="handleDelete(index)">
|
||
×
|
||
</view>
|
||
</view>
|
||
<!-- 上传按钮 -->
|
||
<view class="preview-item">
|
||
<view
|
||
class="upload-btn"
|
||
@click="handleUpload"
|
||
:style="btnStyle"
|
||
v-if="fileList.length < maxCount"
|
||
>
|
||
<slot name="button">
|
||
<text class="plus-icon">+</text>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 视频预览区域 -->
|
||
<view class="preview-container" :style="'width:'+width" v-if="accept == 'video/*'">
|
||
<view
|
||
class="preview-item"
|
||
v-if="oneFile"
|
||
>
|
||
<!-- <video
|
||
:src="oneFile"
|
||
class="preview-image"
|
||
@click="handlePreview(index)"
|
||
/> -->
|
||
<image class="preview-image" :src="oneFile + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
|
||
<view v-if="deletable" class="delete-icon" @click.stop="handleDelete()">
|
||
×
|
||
</view>
|
||
</view>
|
||
<view class="preview-item">
|
||
<!-- 上传按钮 -->
|
||
<view
|
||
class="upload-btn"
|
||
@click="handleUpload"
|
||
:style="btnStyle"
|
||
v-if="!oneFile"
|
||
>
|
||
<slot name="button">
|
||
<text class="plus-icon">+</text>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 提示文字 -->
|
||
<!-- <text v-if="tips" class="tips-text">{{ tips }}</text> -->
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
import permissionUtils from '../../utils/per'
|
||
import locationService from '../../utils/locationService';
|
||
export default {
|
||
name: 'AliOssUploader',
|
||
|
||
props: {
|
||
// 已上传文件列表
|
||
value: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 单个上传文件
|
||
fileString: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 按钮文字
|
||
buttonText: {
|
||
type: String,
|
||
default: '上传图片'
|
||
},
|
||
// 提示文字
|
||
tips: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 最大上传数量
|
||
maxCount: {
|
||
type: Number,
|
||
default: 3
|
||
},
|
||
// 单个文件大小限制(MB)
|
||
maxSize: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
// 是否显示预览
|
||
showPreview: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否可删除
|
||
deletable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 按钮自定义样式
|
||
btnStyle: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
// 文件类型
|
||
accept: {
|
||
type: String,
|
||
default: 'image/*'
|
||
},
|
||
// 当前用户id
|
||
userId: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
kind: {
|
||
type: Number,
|
||
default: 1
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
fileList: [],
|
||
oneFile: '',
|
||
loading: false
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
value: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
this.fileList = [...newVal]
|
||
}
|
||
},
|
||
fileString: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
this.oneFile = newVal
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
|
||
// 显示权限说明弹窗
|
||
showPermissionDialog(title, content) {
|
||
return new Promise((resolve) => {
|
||
uni.showModal({
|
||
title,
|
||
content,
|
||
confirmText: '去开启',
|
||
success(res) {
|
||
resolve(res.confirm);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
// 触发上传
|
||
async handleUpload() {
|
||
// 判断
|
||
try {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
if(systemInfo.platform === 'ios') {
|
||
this.openCamera();
|
||
}else {
|
||
let xcpermission = '';
|
||
let xjpermission = '';
|
||
if(systemInfo.platform === 'ios') {
|
||
xcpermission = 'photo_library',
|
||
xjpermission = 'camera'
|
||
}else {
|
||
xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
|
||
xjpermission = 'android.permission.CAMERA'
|
||
}
|
||
const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
|
||
const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
|
||
if(xcfirstRequest || xjfirstRequest) {
|
||
// this.isShowPer = true;
|
||
console.log('ckeckisShowPer',true)
|
||
this.$emit('ckeckisShowPer',true)
|
||
}
|
||
|
||
// 1. 检查权限
|
||
// const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
|
||
this.$emit('ckecknowQer','xc')
|
||
const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
|
||
this.$emit('ckecknowQer','xj')
|
||
const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
|
||
this.$emit('ckeckisShowPer',false)
|
||
this.$emit('ckecknowQer','')
|
||
if (xc.granted && xj.granted) {
|
||
this.openCamera();
|
||
return;
|
||
}
|
||
// this.isShowPer = false;
|
||
// 2. 显示权限说明弹窗
|
||
const confirm = await this.showPermissionDialog(
|
||
'相机相册权限申请',
|
||
'我们需要访问您的相机以及相册以完成更换头像功能'
|
||
);
|
||
|
||
if (!confirm) return;
|
||
|
||
// 3. 请求权限
|
||
this.$emit('ckeckisShowPer',true)
|
||
this.$emit('ckecknowQer','xc')
|
||
const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
|
||
this.$emit('ckecknowQer','xj')
|
||
const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
|
||
if (result1 && result2) {
|
||
this.openCamera();
|
||
} else {
|
||
locationService.openAppSettings();
|
||
// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
|
||
}
|
||
this.$emit('ckeckisShowPer',false)
|
||
this.$emit('ckecknowQer','')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('上传出错:', error)
|
||
this.$emit('error', error)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
async openCamera() {
|
||
if (this.loading) return
|
||
if (this.fileList.length >= this.maxCount) {
|
||
return uni.showToast({
|
||
title: `最多上传${this.maxCount}个文件`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
try {
|
||
this.loading = true
|
||
let res;
|
||
let tempFiles;
|
||
if(this.accept == 'image/*') {
|
||
const res = await uni.chooseImage({
|
||
count: this.maxCount - this.fileList.length,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera']
|
||
})
|
||
const tempFiles = res.tempFiles
|
||
for (const file of tempFiles) {
|
||
await this.uploadFile(file)
|
||
}
|
||
}else if(this.accept == 'video/*') {
|
||
const res = await uni.chooseVideo({
|
||
count: 1,
|
||
sourceType: ['album', 'camera'],
|
||
compressed: false
|
||
})
|
||
// #ifdef H5
|
||
const file = res.tempFile;
|
||
// #endif
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
const file = res;
|
||
// #endif
|
||
await this.uploadFile(file)
|
||
}
|
||
} catch (error) {
|
||
console.error('上传出错:', error)
|
||
this.$emit('error', error)
|
||
}
|
||
},
|
||
// 上传文件到OSS
|
||
async uploadFile(file) {
|
||
// 检查文件大小
|
||
if (file.size > this.maxSize * 1024 * 1024) {
|
||
uni.showToast({
|
||
title: `文件大小不能超过${this.maxSize}MB`,
|
||
icon: 'none'
|
||
})
|
||
return Promise.reject(new Error('文件大小超出限制'))
|
||
}
|
||
let date = new Date().getTime()
|
||
let imageType;
|
||
if(this.accept == 'image/*') {
|
||
imageType = file.path.split('.')
|
||
}else if(this.accept == 'video/*') {
|
||
// #ifdef H5
|
||
imageType = file.name.split('.')
|
||
// #endif
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
imageType = file.tempFilePath.split('.')
|
||
// #endif
|
||
}
|
||
console.log('imageType',imageType)
|
||
|
||
let artisan = this.type==1 ? 'yh' : this.type==2 ? 'syr' : this.type==3 ? 'sj' : '';
|
||
let name = `${this.userId}_${artisan}_${date}.${imageType[imageType.length - 1]}`
|
||
console.log('name',name)
|
||
try {
|
||
// 1. 获取OSS上传凭证
|
||
const ossConfig = await this.getOssConfig()
|
||
// 2. 上传文件
|
||
const uploadRes = await this.uploadToOss(file, ossConfig, name)
|
||
// 3. 添加到文件列表
|
||
const fileUrl = `${ossConfig.host}/${ossConfig.dir}${name}`
|
||
if(this.accept == 'image/*') {
|
||
const newFile = [`${fileUrl}`]
|
||
this.fileList = this.fileList.concat(newFile)
|
||
this.$emit('input', this.fileList)
|
||
this.$emit('change', this.fileList)
|
||
this.$emit('success', newFile)
|
||
return newFile
|
||
}else if(this.accept == 'video/*') {
|
||
const newFile = fileUrl
|
||
this.oneFile = fileUrl
|
||
this.$emit('input', this.oneFile)
|
||
this.$emit('change', this.oneFile)
|
||
this.$emit('success', newFile)
|
||
return newFile
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('上传失败:', error)
|
||
this.$emit('error', error)
|
||
throw error
|
||
}
|
||
},
|
||
|
||
// 获取OSS配置
|
||
async getOssConfig() {
|
||
try {
|
||
const res = await request.post('/user/getalioss',{type: this.type,kind: this.kind})
|
||
return res
|
||
} catch (error) {
|
||
console.error('获取OSS配置失败:', error)
|
||
throw error
|
||
}
|
||
},
|
||
|
||
// 上传到OSS
|
||
uploadToOss(file, ossConfig, name) {
|
||
return new Promise((resolve, reject) => {
|
||
// #ifdef H5
|
||
const formData = new FormData()
|
||
formData.append('name',name);
|
||
formData.append('policy', ossConfig.policy);
|
||
formData.append('OSSAccessKeyId', ossConfig.ossAccessKeyId);
|
||
formData.append('success_action_status', '200');
|
||
formData.append('signature', ossConfig.signature);
|
||
formData.append('key', ossConfig.dir + name);
|
||
// file必须为最后一个表单域，除file以外的其他表单域无顺序要求。
|
||
formData.append('file', file);
|
||
fetch(ossConfig.host, { method: 'POST', body: formData},).then((res) => {
|
||
resolve(res)
|
||
}).catch(()=>{
|
||
reject(new Error(`上传失败: ${res.statusCode}`))
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
let formData = {};
|
||
formData.name = name;
|
||
formData.policy = ossConfig.policy;
|
||
formData.OSSAccessKeyId = ossConfig.ossAccessKeyId;
|
||
formData.success_action_status = '200';
|
||
formData.signature = ossConfig.signature;
|
||
formData.key = ossConfig.dir + name;
|
||
formData.file = file;
|
||
let path;
|
||
if(this.accept == 'image/*') {
|
||
path = file.path
|
||
}else if(this.accept == 'video/*') {
|
||
// #ifdef H5
|
||
path = file.name
|
||
// #endif
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
path = file.tempFilePath
|
||
// #endif
|
||
}
|
||
// 使用 uni.uploadFile 上传文件（支持多平台）
|
||
uni.uploadFile({
|
||
url: ossConfig.host,
|
||
filePath: path, // 手机端文件路径
|
||
name: 'file',
|
||
formData: {
|
||
key: ossConfig.dir + name, // 文件名
|
||
policy: ossConfig.policy, // 后台获取超时时间
|
||
OSSAccessKeyId: ossConfig.ossAccessKeyId, // 后台获取临时ID
|
||
success_action_status: 200, // 让服务端返回200,不然，默认会返回204
|
||
signature: ossConfig.signature // 后台获取签名
|
||
},
|
||
success(res) {
|
||
resolve(`${ossConfig.host}/${ossConfig.dir}${name}`)
|
||
}
|
||
});
|
||
// #endif
|
||
})
|
||
|
||
},
|
||
|
||
// 预览图片
|
||
handlePreview(index) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.fileList.map(item => item.url)
|
||
})
|
||
},
|
||
|
||
// 删除文件
|
||
handleDelete(index) {
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '确定删除该文件吗？',
|
||
// success: (res) => {
|
||
// if (res.confirm) {
|
||
if(this.accept == 'image/*') {
|
||
const deletedFile = this.fileList[index]
|
||
this.fileList.splice(index, 1)
|
||
this.$emit('input', this.fileList)
|
||
this.$emit('change', this.fileList)
|
||
this.$emit('delete', deletedFile, index)
|
||
}else if(this.accept == 'video/*') {
|
||
const deletedFile = this.oneFile
|
||
this.oneFile = ''
|
||
this.$emit('input', this.oneFile)
|
||
this.$emit('change', this.oneFile)
|
||
this.$emit('delete', deletedFile)
|
||
}
|
||
|
||
// }
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* .ali-oss-uploader {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
justify-items: center;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
} */
|
||
|
||
.preview-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
justify-items: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.upload-btn {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 2rpx dashed #ddd;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
/* margin-top: 20rpx; */
|
||
}
|
||
|
||
.plus-icon {
|
||
font-size: 60rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.tips-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.preview-item {
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.preview-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.delete-icon {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: #ff4d4f;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
z-index: 1;
|
||
}
|
||
</style> |