uniapp上传图片

简介: uniapp上传图片

我这里用的是uni-file-picker,话不多说直接上代码,

template部分

<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"limit="1"></uni-file-picker>

script部分

select(e){
              const tempFilePaths = e.tempFilePaths;
              //获取图片临时路径
          let token = localStorage.getItem('ACCESS_TOKEN')
              const imgUrl=tempFilePaths[0]
          console.log(imgUrl)
              uni.uploadFile({
                //图片上传地址
                url: '上传的路径', 
                filePath: imgUrl,
                //设置请求头
                header: { Authorization: "Bearer " + token }, 
                //请求成功,后台返回自己服务器上的图片地址
                success: (uploadFileRes) => {
                  console.log('uploadFileRes',JSON.parse(uploadFileRes.data));   
                  //处理数据
                  const path=JSON.parse(uploadFileRes.data)
            console.log(path)
                }
              });
            }, 
目录
相关文章
|
8月前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
288 0
uniapp根据官方文档上传图片的方法
uniapp根据官方文档上传图片的方法
|
存储 移动开发 小程序
【uniapp小程序】上传图片
【uniapp小程序】上传图片
1472 0
【uniapp小程序】上传图片
|
小程序
UniApp上传图片
小程序大家应该都知道,通过上传组件得到的都是本地的一个临时路径,这个路径是不能被外网访问的,所以我们就需要将拿到的临时路径转成Base64上传到后台服务器。或者说是另外一个办法,就是通过组件直接上传文件,这个看需求设计吧。
400 0
|
8月前
uniapp上传图片功能怎么实现?
uniapp上传图片功能怎么实现?
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
459 0
uniapp上传图片的回显
uniapp上传图片的回显
431 0
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
146 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
84 7
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
101 7

相关课程

更多

相关实验场景

更多