uniapp v3+ts 使用 u-upload上传图片以及视频

上传图片方法 

<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.urlfile.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}