欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页知识笔记正文

uniapp v3 ts 使用 uupload上传片以及视频,微博如何上传片和视频

墨初 知识笔记 145阅读
上传图片方法 
<u-upload :fileListfileList1 afterReadafterRead deletedeletePic namefile multiple :maxCount6></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 acceptvideo :fileListvideoFileList afterReadvideoAfterRead      deletedeleteVideo  name3 multiple :maxCount1></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    }

标签:
声明:无特别说明,转载请标明本文来源!