<view class="file-upload file-upload-icon">
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deleteFile" :name="name" :deletable="deletable"
:multiple="multiple" :maxCount="maxCount" :disabled="disabled" :previewFullImage="previewFullImage"
:previewImage="previewFullImage" :accept="accept"></u-upload>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import {uploadFile} from "@/api/api.js"
import {
randomString,
} from "@/util/validate.js";
import {
success,
error
} from "@/util/message.js"
import {
isHaveNetwork
} from '@/util/utils.js'
export default {
props: {
// 上传url
uploadFileUrl:{
type: String,
default: '/hytec/sys/upload/uploadMinio' // 默认minio
},
// 传递过来的file数据
fileData:{
type: Array,
default:()=>[]
},
// 上传文件类型 all | media | image | file | video
accept: {
type: String,
default: 'image'
},
// 是否显示图片删除按钮
deletable: {
type: Boolean,
default: true
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否支持多选
multiple: {
type: Boolean,
default: false
},
// 标识符
name: {
type: String,
default: '3'
},
// 是否预览文件
previewFullImage: {
type: Boolean,
default: true
},
// 最多上传数量
maxCount: {
type: String,
default: '3'
}
},
watch:{
fileData:{
handler(newVal,oldVal){
if(newVal && newVal.length){
let arr = []
newVal.map((item,index)=>{
arr.push({url:item,oldUrl:item,isUpload:true})
})
this.fileList = JSON.parse(JSON.stringify(arr))
this.uploadFileList = JSON.parse(JSON.stringify(arr))
}else{
this.fileList = []
}
},
deep:true,
immediate: true
}
},
data() {
return {
fileList: [],
uploadFileList:[] // 上传过后的数据
}
},
created() {
},
methods: {
deleteFile(e) {
let that = this
console.log("eeeeee----",e)
that.fileList = that.fileList.filter(v=>v.url != e.file.url)
console.log("that.fileList",that.fileList)
that.uploadFileList = that.uploadFileList.filter(v=>v.oldUrl !=e.file.url)
console.log("that.uploadFileList",that.uploadFileList)
// 向父级发送文件
that.emitFileUrl()
},
async afterRead(e) {
let that = this
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
console.log("E.file",e.file)
console.log("E.file",e.file instanceof Object )
if(e){
// 如果是对象
let newArr = []
if(e.file.url){
that.fileList.push({url:e.file.url})
newArr.push({url:e.file.url})
}else{
let data = e.file
if(data && data.length){
data.map((item,index)=>{
that.fileList.push({url:item.url})
newArr.push({url:item.url})
})
}
}
const ishas = await isHaveNetwork()
// that.uploadFiles(newArr)
if(ishas.ishave){
that.uploadFiles(newArr)
}else{
that.dealNoWork(newArr)
}
}
},
//处理没网数据
dealNoWork(arr){
let that =this
if(arr&&arr.length){
arr.forEach(item=>{
that.uploadFileList.push({
url: item.url
})
})
// 向父级发送文件
that.emitFileUrl()
}
},
// 上传附件
async uploadFiles(arr){
let that = this
if(arr && arr.length && that.uploadFileUrl){
for(let i = 0; i<arr.length;i++){
let res = await uploadFile(that.uploadFileUrl,arr[i].url)
if(res.success){
that.uploadFileList.push({
oldUrl:arr[i].url,
url: res.result && res.result.path?res.result.path:res.message?res.message:''
})
}else{
that.$nextTick(()=>{
that.$refs.uToast.show(error(res.message))
})
}
}
// 向父级发送文件
that.emitFileUrl()
}
},
// 向父级发送文件
emitFileUrl(){
let that = this
that.$emit("change",that.uploadFileList)
},
//清空数据
clearData(){
this.fileList=[]
}
}
}
</script>
<style lang="scss">
.file-upload-icon {
/deep/ .u-upload__button {
background: #E3E6E8;
}
/deep/ .u-upload__deletable{
width: 40rpx;
height: 40rpx;
}
/deep/ .uicon-close{
font-size: 30rpx !important;
top: 8rpx !important;
}
}
</style>
<style lang="scss" scoped></style>```
- 发布:2023-03-27 15:07
- 更新:2023-07-15 22:00
- 阅读:402
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 11 专业版 22H2
HBuilderX类型: 正式
HBuilderX版本号: 3.7.9
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: Redmi Note 8 Pro
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,无法获取视频文件上传
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,无法获取视频文件上传
预期结果:
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,获取视频文件上传
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,获取视频文件上传
实际结果:
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,无法获取视频文件上传
点击上传视频按钮,弹出使用视频录制权限,点击确认获取权限,拍摄视频,点击确认,无法获取视频文件上传
小嗨嗨 (作者)
没解决
2023-07-18 13:57