上传图片方法
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="file" multiple :maxCount="6"></u-upload>
// maxCount 最大上传数
const fileList1 = ref([]);
const file = ref([])
// 删除图片
const deletePic = (event : any) => {
fileList1.value.splice(event.index, 1);
file.value.splice(event.index, 1);
// console.log(fileList1.value); file
};
// 新增图片
const afterRead = async (event : any) => {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
let fileListLen = fileList1.value.length;
lists.map((item) => {
fileList1.value.push({
...item,
status: 'uploading',
message: '上传中',
});
});
for (let i = 0; i < lists.length; i++) {
const result = await uploadFilePromise(lists[i].url);
let item = fileList1.value[fileListLen];
fileList1.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
url: result,
});
fileListLen++;
}
};
const uploadFilePromise = (url : any) => {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: import.meta.env.VITE_APP_BASE_URL + 'file/image', // 图片上传地址
filePath: url,
name: 'file',
header: {
"site-id": import.meta.env.VITE_SITE_ID,
"token": getToken()
},
formData: {
},
success: (res) => {
let respic = JSON.parse(res.data)
console.log(respic.data.url, '图片');
let obj = respic.data.url
file.value.push(obj)
setTimeout(() => {
resolve(res.data.data);
}, 1000);
},
});
});
};
上传视频 方法
<u-upload accept="video" :fileList="videoFileList" @afterRead="videoAfterRead"
@delete="deleteVideo " name="3" multiple :maxCount="1"></u-upload>
const videoFileList = ref([])
const videoAfterRead = async (event : any) => {
let lists = [].concat(event.file);
let fileListLen = videoFileList.value.length;
lists.map((item) => {
videoFileList.value.push({
...item,
status: 'uploading',
message: '上传中',
});
});
for (let i = 0; i < lists.length; i++) {
const result = await uploadVideoFile(lists[i].url);
let item = videoFileList.value[fileListLen];
videoFileList.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
url: result,
});
fileListLen++;
}
};
const videoValue = ref('')
const uploadVideoFile = (url : any) => {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
// 后端上传视频地址
url: import.meta.env.VITE_APP_BASE_URL + 'file/video', // 视频上传地址
filePath: url,
name: 'file',
// header 携带内容 根据自己后端要求
header: {
"site-id": import.meta.env.VITE_SITE_ID,
"token": getToken()
},
success: (res) => {
res.data = JSON.parse(res.data)
// console.log(res.data, '测试');
videoValue.value = res.data.data.url
// console.log(videoValue.value, '测试');
// 这个状态值要根据后端接口返的 若对不上 则视频不会回显,一直显示上传中
if (res.data.code == 1) {
setTimeout(() => {
resolve(res.data.url)
}, 1000)
}
},
fail: (error) => {
console.log(error, '上次失败的原因');
uni.showToast({
title: '上传失败',
icon: 'none'
});
reject(error)
}
});
});
};
const deleteVideo = (event : any) => {
videoFileList.value.splice(event.index, 1);
videoValue.value = '';
}
点击提交时 要传递视频 跟图片的地址值
const submit = () => {
let params = {
images: file.value,
video: videoValue.value
}
console.log(params, '发布的参数');
// 执行自己的请求 todo
}