首页 > 其他分享 >uniapp上传图片

uniapp上传图片

时间:2022-08-22 21:58:22浏览次数:80  
标签:uniapp tempFilePaths imgList token uni 上传 图片

1、

getUploadImg(e) {
uni.chooseImage({
count: 9,
// 默认9
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// 图片的本地临时文件路径列表
this.tempFilePaths = res.tempFilePaths;
this.fileData=res.tempFiles
//imgList为渲染页面的图片数组
if (this.imgList.length == 0) {
this.imgList = this.tempFilePaths
} else {
this.imgList = this.imgList.concat(this.tempFilePaths)
}
}
});
},

2、

//上传单张图片
 var token = 'Bearer ' + uni.getStorageSync('token');
uni.uploadFile({ //循环调用上传单个文件的接口,实现多文件上传
 url: common.apiUrl +'/elms/devicerelationpicture', //仅为示例,非真实的接口地址
   name: 'files', //后台接收图片的字段,自定义的
 fileType:'image',
   filePath: this.tempFilePaths[0],
   formData: {
   'relationId':this.relationId,
   'type':'device',
   },
  header:{
 'Authorization': token,
 'Token': token,
   },
 success: function (uploadFileRes) {
} ,
 })

3、

//上传多张图片
var token = 'Bearer ' + uni.getStorageSync('token');
for (let i = 0; i < this.fileData.length; i++) {
let obj = new Object();
obj.name = 'files';   //后台接收图片的字段,自定义的
obj.uri = this.fileData[i].path;
this.fileList.push(obj);
}
uni.uploadFile({ //循环调用上传单个文件的接口,实现多文件上传
url: common.apiUrl +'/elms/devicerelationpicture', //仅为示例,非真实的接口地址
files:this.fileList,  //这里传递的参数是files,不是file.且不需要传name和filePath字段
formData: {
'relationId':this.relationId,
'type':'device',
},
        header:{
'Authorization': token,
'Token': token,
 },
success: function (uploadFileRes) {
 } ,
})
},

4、控制台

 

标签:uniapp,tempFilePaths,imgList,token,uni,上传,图片
From: https://www.cnblogs.com/panzai/p/16614392.html

相关文章

  • PHP 多文件上传功能实例讲解
    PHP文件上传功能是非常普片的需求,而在网站开发过程中,我们可以需要同时上传多个文件,这个时候就需要开发出php多文件上传的功能。在本教程中,我将向您展示如何使用PHP实现多个......
  • 使用clipboard.js复制文字+图片到微信后图片不显示问题处理
    使用clipboard.js复制文字+图片,粘贴到微信不显示图片,而QQ可以。解决方案:图片链接使用http,不要使用https。 使用clipboard.js实现复制功能文字+图片到微信客户端输入......
  • 博客粘贴图片自动上传到服务器(Java版)
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-......
  • wordpress粘贴图片自动上传到服务器(Java版)
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘......
  • SiteFactory粘贴图片自动上传到服务器(Java版)
    ​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" i......
  • 动易CMS粘贴图片自动上传到服务器(Java版)
    ​ tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。umedit......
  • 直播平台怎么搭建,uniapp 字体图标设置渐变色
    直播平台怎么搭建,uniapp字体图标设置渐变色css:.fund-icon{   font-size:41rpx*2;//控制图标大小   margin-top:105rpx*2;   margin-bottom......
  • 介绍一个博客图片上传辅助工具
    前言熟悉我的朋友可能知道,我从18年开始尝试的写一些文字记录一些东西;最开始我是在CSDN上进行创作,后面由于实在忍受不了CSDN上面各种商业化产品转战到博客园。由于之前一......
  • php上传多个图片文件
    前端文件upload1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metana......
  • 在node.js中使用multer实现文件的上传
    在node.js中使用multer实现文件的上传上传图片的思路客户端--点击上传--服务器上(物理位置)数据库中的字段banner_img存放的是图片在服务器上的路径场景在使用node.js(ex......