You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
7.6 KiB
270 lines
7.6 KiB
<template> |
|
<view class="img-box"> |
|
<view class="bg-img" v-for="(item, index) in fileList" :key="index" :data-url="fileList[index]"> |
|
<view class="del-icon" v-if="!disabled"> |
|
<u-icon name="close" color="#fff" size="14" top="-20" @click="deleteFn(item, index)"></u-icon> |
|
</view> |
|
<image v-if="isImage(item)" @click="previewImage(item)" :src="item.link" mode="aspectFill"></image> |
|
<image class="video-img" v-if="isVideo(item)" @click="previewVideo(item)" src="@/static/images/submit/video.svg" |
|
mode="aspectFill"></image> |
|
</view> |
|
<view class="upload" @click="chooseFile" v-if="!disabled && (fileList.length < 10)"> |
|
<u-icon size="28" name="plus" color="rgba(139,146,155,1)"></u-icon> |
|
</view> |
|
|
|
<!-- 视频预览弹框 --> |
|
<u-mask :show="videoShow" :custom-style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"> |
|
<u-icon class="icon-close" color="#fff" name="close-circle" size="68" @click="videoShow = false"></u-icon> |
|
<video id="myVideo" v-if="videoShow" enable-play-gesture style="width: 100wh" :src="videoLink" controls></video> |
|
</u-mask> |
|
<betone-loading ref="BetLoading"></betone-loading> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { isVideo, isImage } from "@/utils/util"; |
|
import website from '@/utils/website' |
|
|
|
export default { |
|
name: "spUpload", |
|
model: { |
|
prop: "value", |
|
event: "changeFile", |
|
}, |
|
props: { |
|
type: { |
|
type: String, |
|
default: "", |
|
}, |
|
disabled: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
value: { |
|
type: Array, |
|
default: [], |
|
}, |
|
formIndex: { |
|
type: Number, |
|
default: 0, |
|
} |
|
}, |
|
watch: { |
|
value(data) { |
|
this.fileList = data; |
|
}, |
|
}, |
|
data() { |
|
return { |
|
fileList: [],//数据列表 |
|
videoShow: false, |
|
videoLink: '' |
|
}; |
|
}, |
|
methods: { |
|
// 选择文件 |
|
chooseFile() { |
|
if (this.type == "video") { |
|
this.chooseVideo(); |
|
} |
|
if (this.type == "images") { |
|
this.chooseImage(); |
|
} |
|
}, |
|
chooseImage() { |
|
uni.chooseImage({ |
|
count: 1, // 默认9 |
|
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有 |
|
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有 |
|
success: (res) => { |
|
this.$refs.BetLoading.show() |
|
// 成功选择图片后的回调 |
|
const tempFilePaths = res.tempFilePaths; |
|
|
|
uni.compressImage({ |
|
src: tempFilePaths[0], // 图片路径 |
|
quality: 50, // 压缩质量，范围为0 - 100，100为不压缩 |
|
success: (compressRes) => { |
|
const compressedFilePath = compressRes.tempFilePath; |
|
// 使用uni.getFileInfo获取文件信息 |
|
uni.getFileInfo({ |
|
filePath: compressedFilePath, |
|
success: (infoRes) => { |
|
// 获取文件大小，单位为字节 |
|
const size = infoRes.size / 1024 / 1024; // 计算文件大小（单位：M） |
|
if (size > 10) { |
|
uni.showToast({ title: '图片大小不能超过10M', icon: 'none' }); |
|
} else { |
|
this.uploadFile(compressedFilePath); |
|
} |
|
}, |
|
fail: (err) => { |
|
console.error('获取文件信息失败：', err); |
|
} |
|
}); |
|
|
|
} |
|
}) |
|
|
|
|
|
}, |
|
}); |
|
}, |
|
chooseVideo() { |
|
uni.chooseVideo({ |
|
count: 1, // 默认9 |
|
sourceType: ["album", "camera"], |
|
success: (res) => { |
|
this.$refs.BetLoading.show() |
|
const tempFilePaths = res.tempFilePath; |
|
// 成功选择视频后的回调 |
|
uni.compressVideo({ //压缩视频 |
|
src: tempFilePaths, |
|
quality: '1', |
|
success: (compressRes) => { |
|
uni.getFileInfo({ |
|
filePath: compressRes.tempFilePath, |
|
success: (infoRes) => { |
|
// 获取文件大小，单位为字节 |
|
const size = infoRes.size / 1024 / 1024; // 计算文件大小（单位：M） |
|
if (size > 50) { |
|
uni.showToast({ title: '视频大小不能超过50M', icon: 'none' }); |
|
} else { |
|
this.uploadFile(compressRes.tempFilePath); |
|
} |
|
}, |
|
fail: (err) => { |
|
console.error('获取文件信息失败：', err); |
|
} |
|
}); |
|
|
|
}, |
|
fail:(err)=>{ |
|
console.log(666,err) |
|
} |
|
}) |
|
}, |
|
}); |
|
}, |
|
uploadFile(filePath) { |
|
const token = uni.getStorageSync("token") |
|
uni.uploadFile({ |
|
url: website.baseUrl + "/blade-resource/oss/endpoint/put-file", // 服务器上传接口 |
|
filePath: filePath, |
|
name: "file", // 必须填写，后台用来接收文件 |
|
header: { |
|
'Blade-Auth': 'bearer ' + token, |
|
'Authorization':`Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`, |
|
'blade-requested-with': 'BladeHttpRequest' //自定义请求头 |
|
}, |
|
formData: {}, |
|
success: (res) => { |
|
let info = JSON.parse(res.data); |
|
console.log("上传成功", info); // 上传成功后的操作 |
|
|
|
this.fileList.push({ |
|
'link': info.data.link, |
|
'name': info.data.name, |
|
'domain':info.data.domain, |
|
'originalName':info.data.originalName |
|
}); |
|
this.$emit('changeFile', this.fileList, this.formIndex) |
|
this.$refs.BetLoading.hide() |
|
}, |
|
error: (uploadFileRes) => { |
|
// console.log("上传失败", uploadFileRes.data); // 上传成功后的操作 |
|
this.$refs.BetLoading.hide() |
|
}, |
|
}); |
|
}, |
|
// 预览图片 |
|
previewImage(item) { |
|
uni.previewImage({ |
|
current: '', // 当前显示图片的 http 链接 |
|
urls: [item.link] |
|
}) |
|
}, |
|
// 预览视频 |
|
previewVideo(item) { |
|
this.videoShow = true |
|
this.videoLink = item.link |
|
}, |
|
// 删除 |
|
deleteFn(item, index) { |
|
this.fileList.splice(index, 1) |
|
this.$emit('changeFile', this.fileList, this.formIndex) |
|
}, |
|
// 判断是视频还是图片 |
|
isImage(arg) { |
|
// 实现你的方法逻辑 |
|
return isImage(arg.link); // 调用导入的方法 |
|
}, |
|
isVideo(arg) { |
|
// 实现你的方法逻辑 |
|
return isVideo(arg.link); // 调用导入的方法 |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.img-box { |
|
.bg-img { |
|
width: 168rpx; |
|
height: 168rpx; |
|
float: left; |
|
border-radius: 10rpx; |
|
overflow: hidden; |
|
margin-right: 30rpx; |
|
position: relative; |
|
margin-bottom: 32rpx; |
|
background: #fff; |
|
border: 1px solid rgba(217, 217, 217, 1); |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.video-img { |
|
width: 50%; |
|
height: 50%; |
|
margin: auto; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
|
|
.del-icon { |
|
position: absolute; |
|
top: 8rpx; |
|
right: 8rpx; |
|
z-index: 9; |
|
width: 36rpx; |
|
height: 36rpx; |
|
border-radius: 50%; |
|
background: red; |
|
text-align: center; |
|
} |
|
} |
|
|
|
.upload { |
|
border: 1px solid rgba(217, 217, 217, 1); |
|
width: 168rpx; |
|
height: 168rpx; |
|
text-align: center; |
|
line-height: 168rpx; |
|
float: left; |
|
border-radius: 10rpx; |
|
margin-bottom: 32rpx; |
|
} |
|
|
|
.icon-close { |
|
position: absolute; |
|
top: 40rpx; |
|
right: 40rpx; |
|
} |
|
} |
|
</style> |