已解决
uniapp v3+ts 使用 u-upload上传图片以及视频
来自网友在路上 176876提问 提问时间:2023-10-24 20:10:59阅读次数: 76
最佳答案 问答题库768位专家为你答疑解惑
上传图片方法
<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}
查看全文
99%的人还看了
相似问题
- Docker篇之利用docker搭建ftp服务器可实现多用户上传
- 【Vue3】解决Vue打包后上传服务器 资源路径加载错误
- 推荐一个windows上传linux服务器/linux服务器的docker镜像的工具,摆脱docker cp,以及解决常见问题。
- git 将本地已有的一个项目上传到新建的git仓库的方法
- 微信小程序发货信息录入接口 错误上传时间非法,请按照 RFC 3339 格式填写?
- 如何防止研发把代码上传到私人gitee/github?
- 中间件安全:Apache Tomcat 文件上传.(CVE-2017-12615)
- git下载安装配置及Git在Gitee上拉取和上传代码教程
- 文件上传漏洞(CVE-2022-23043)
- react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作
猜你感兴趣
版权申明
本文"uniapp v3+ts 使用 u-upload上传图片以及视频":http://eshow365.cn/6-23588-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: Python中文分词、词频统计并制作词云图
- 下一篇: Flask后端开发(一)-基础知识和前期准备