javascript
复制代码
// 结构
<uni-file-picker
file-mediatype="image"
limit="9"
title="添加照片"
:sourceType="['album', 'camera']"
@select="picObj.selectFile"
@progress="picObj.progressFile"
@success="picObj.successFile"
@fail="picObj.failFile"
@delete="picObj.deleteFile"></uni-file-picker>
// 现场照片=============================
const picObj = reactive({
loadPic: [],
selectFile: (e) => {
// 选择文件
// console.log("选择文件", e)
e.tempFiles.forEach((file) => {
if (file.size / 1024 / 1024 > 4) {
uni.showToast({
title: '大小不能超过4MB，请重新上传！',
icon: 'none',
});
return false;
}
if (!["jpeg", "jpg", "png"].includes(file.extname)) {
uni.showToast({
title: '文件格式有误！',
icon: 'none',
});
return false;
}
picObj.fileLists.push({
fileName: file.name,
filePath: file.path
})
})
},
progressFile: (e) => {
console.log("上传进度", e)
},
successFile: (e) => {
console.log("上传成功", e)
},
failFile: (e) => {
console.log("上传失败", e)
},
deleteFile: (e) => {
// 移除文件
// console.log("移除文件", e)
picObj.fileLists.splice(e.index, 1)
},
imageStyles: {
width: 64,
height: 64,
border: {
radius: '50%'
}
},
fileLists: [
// {
// url: '/static/pipeReport/pic_01.png',
// extname: 'png',
// name: 'shuijiao.png'
// },
]
});
javascript
复制代码
//结构
<view class="uni-file-picker__container">
<view class="file-picker__box" v-if="!videoObj.listSrc.length" @click="videoObj.handleVideo">
<view class="file-picker__box-content is-add">
<view class="is-add">
<view class="icon-add"></view>
<view class="icon-add rotate"></view>
</view>
</view>
</view>
<view class="video_container" v-else>
<view class="icon-del-box" @click="videoObj.handleDel">
<view class="icon-del"></view>
<view class="icon-del rotate"></view>
</view>
<view class="video_box" v-show="videoShow">
<video :src="videoObj.listSrc[0]" controls direction="0"></video>
</view>
</view>
</view>
// 视频盒子是否显示,默认显示,当问题类型或问题处理状态点击下放出现弹出层是隐藏,否则会遮挡
const videoShow = ref(true)
// 添加视频
const videoObj = reactive({
listSrc: [],
handleVideo: () => {
uni.chooseVideo({
sourceType: ['camera', 'album'],
extension: ['mp4'],
compressed: true,
maxDuration: 60,
success: function (res) {
console.log("res",res)
if(res.duration > 61) {
uni.showToast({
title: '视频时长不能超过60s，请重新上传！',
icon: 'none',
});
return false;
} else {
videoShow.value = true
videoObj.listSrc.push(res.tempFilePath)
}
}
})
},
handleDel: () => {
videoObj.listSrc = []
}
})
javascript
复制代码
// 点击提交执行的方法
uploadImg: () => {
if(videoObj.listSrc.length) {
picObj.fileLists.push({
fileName: "video",
filePath: videoObj.listSrc[0]
})
}
// token
const accessToken = uni.getStorageSync('token');
const unifysingToken = uni.getStorageSync('Unifysign')
// 使用Promise.all来同时上传所有图片
Promise.all(picObj.fileLists.map(path => {
return new Promise((resolve, reject) => {
console.log('path==', path)
uni.uploadFile({
url: apiUrl + '/t/uploadFile', // 你的上传API地址
filePath: path.filePath,
name: 'imgFile', // 这里根据API的要求来定义
header: {
'Content-Type': 'multipart/form-data',
'Authorization': `${accessToken}`,
'Unifysign': `${unifysingToken}`,
},
formData: {
// 这里可以添加一些额外的表单字段
},
success: (uploadFileRes) => {
// 上传成功处理逻辑
let data = JSON.parse(uploadFileRes.data)
console.log('data==', data)
if (data.code == 200) {
picObj.loadPic.push({
filePath: data.data.filePath, //路径
fileName: data.data.fileName
})
resolve(picObj.loadPic);
} else if (data.code == 500) {
uni.showToast({
title: data.msg || '图片上传失败！',
icon: 'none',
})
} else if (data.code == 4003 || data.code == 4002) {
uni.showToast({
title: data.msg || '请求失败',
icon: 'none',
duration: 2000,
})
uni.redirectTo({
url: '/pages/login/login',
fail: function() {
uni.showToast({
title: 'navigateTo 失败',
icon: 'none',
duration: 2000,
})
}
})
}
},
fail: (error) => {
// 上传失败处理逻辑
reject(error);
}
});
});
})).then(results => {
// 所有图片上传完毕的处理逻辑
paramObj.filePaths = picObj.loadPic
console.log("前",paramObj.filePaths)
paramObj.filePaths.forEach((item, index) => {
let ext = item.filePath.substring(item.filePath.lastIndexOf(".") + 1)
if(ext == "mp4" || ext == "MP4") {
item.fileName = `视频.${ext}`
} else {
item.fileName = `照片${index+1}.${ext}`
}
})
console.log("后",paramObj.filePaths)
// 提交表单方法
savaMod()
// console.log('All images uploaded:', results);
}).catch(error => {
// 处理上传过程中的错误
console.error('Upload error:', error);
});
},