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)
                }
              });
            }, 
目录
相关文章
|
29天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
45 0
|
3月前
uniapp上传图片功能怎么实现?
uniapp上传图片功能怎么实现?
|
6月前
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
267 0
|
9月前
uniapp上传图片的回显
uniapp上传图片的回显
224 0
|
10月前
uniapp根据官方文档上传图片的方法
uniapp根据官方文档上传图片的方法
|
小程序
UniApp上传图片
小程序大家应该都知道,通过上传组件得到的都是本地的一个临时路径,这个路径是不能被外网访问的,所以我们就需要将拿到的临时路径转成Base64上传到后台服务器。或者说是另外一个办法,就是通过组件直接上传文件,这个看需求设计吧。
282 0
|
存储 移动开发 小程序
【uniapp小程序】上传图片
【uniapp小程序】上传图片
1053 0
【uniapp小程序】上传图片
|
12小时前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
7 1
|
13天前
|
缓存 小程序
uniapp读取(获取)缓存中的对象值(微信小程序)
uniapp读取(获取)缓存中的对象值(微信小程序)
11 1
|
17天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
43 4

热门文章

最新文章

相关实验场景

更多