uniapp中上传图片

uniapp上传图片

一、使用ColorUI
二、上传图片
- 1、html代码片段
- 2、methods中代码片段:
- - 2.1 选择图片
  - 2.2 上传图片
  - - 传递 formdata 格式的图片数据到后台
  - 2.3 预览图片
  - 2.4 取消上传删除图片

一、使用ColorUI

在uniapp项目中使用了ColorUI的一些样式，所以就在这里再记录一下使用方法

uniapp项目中引入ColorUI ：

参考链接

ColorUI文档

colorui 下载连接

大致流程：

先去官网下载colorui压缩包，解压到本地
将里面的colorui文件夹复制出来，粘贴到自己定义的一个组件文件夹（例如 plugin ）下
在App.vue中引入colorui中的css文件

<style>/* 引入color ui样式 */@import "plugin/colorui/main.css";@import "plugin/colorui/icon.css";@import "plugin/colorui/animation.css";</style>

main.js中引入colorui，并定义组件，即可使用colorui中的组件了

 import cuCustom from './plugin/colorui/components/cu-custom.vue'Vue.component('cu-custom',cuCustom)

二、上传图片

1、html代码片段

<view class="cu-bar bg-white margin-top"><view class="action">上传照片</view><view class="action">{{imgList.length}}/1</view>
</view>
<view class="cu-form-group"><view class="grid col-4 grid-square flex-sub"><view v-if="imgList.length>0" class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage":data-url="imgList[index]"><image :src="imgList[index]" mode="aspectFill"></image><view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class='cuIcon-close'></text></view></view><view class="solids" @tap="addImage" v-if="imgList.length<1"><text class='cuIcon-cameraadd'></text></view></view>
</view>

2、methods中代码片段:

2.1 选择图片

         //选择图片addImage() {var that = this;// 从本地相册选择图片或使用相机拍照。uni.chooseImage({count: 1, //最多可以选择的图片张数，默认9//album 从相册选图，camera 使用相机，默认二者都有。sourceType: ['album', 'camera'],success: function(res) {//imgList为data中定义的一个数组   保存选择的图片数组（res.tempFilePaths）that.imgList = res.tempFilePathsthat.upload(res)//获取图片信息。// uni.getImageInfo({//   src: res.tempFilePaths[0],//    success: function(image) {//        that.src = (res.tempFilePaths[0]);//       that.imgList = res.tempFilePaths//         console.log(that.src, '获取图片信息'); //打印出图片信息,在浏览器上打开就是你上传的图片//      that.upload(res)//      //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data//  }// })}})}

2.2 上传图片

uni.uploadFile 中的参数说明：

标红处是我当时开发踩到的坑，警示一下

传递 formdata 格式的图片数据到后台

在 uniapp 中不支持 new FormData() 来定义一个formdata格式的数据，需要在header中定义content-type
"Content-Type": "multipart/form-data"

         upload(res) {const that = thislet param  = {biz:'temp'}uni.uploadFile({//开发者服务器 urlurl: that.uploadUrl,//获取要上传文件资源的路径。filePath: res.tempFilePaths[0],fileType:'image',//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容name: 'file',formData:param,//HTTP 请求 Header, header 中不能设置 Referer。header: {"Content-Type": "multipart/form-data",  //关键之处，因为uniapp中不支持直接使用 new FormData() 来定义一个formdata数据，通过这样设置就可以向后台传递formdata格式的数据了'x-access-token':uni.getStorageSync(ACCESS_TOKEN)//请求头中的token  我们项目中的token名叫‘x-access-token’，根据自己的情况修改},//成功的回调success: uploadFileRes => {console.log('上传成功', uploadFileRes)//获取图片信息 网站域名 + res.data.message就是一个图片的完整路径了var res = JSON.parse(uploadFileRes.data);// 这个值就是要返回给后台保存到数据库中的图片地址了that.form.imgUrl= res.message;},fail:(err)=>{console.log('上传失败_______________',err)}})}

2.3 预览图片

         // 预览ViewImage(e) {uni.previewImage({urls: this.imgList,current: e.currentTarget.dataset.url});}

2.4 取消上传删除图片

         DelImg(e) {uni.showModal({title: '提示',content: '确定要删除该照片吗？',cancelText: '再想想',confirmText: '删除',success: res => {if (res.confirm) {that.form.imgUrl= ''this.imgList.splice(e.currentTarget.dataset.index, 1)}}})}

uniapp中上传图片相关推荐

uniapp中上传图片（拍摄）和预览图片(图例和示例代码)
uniapp中上传图片和预览图片图例: 示例代码: 内容 uni.chooseImage上传图片 uni.previewImage预览图片复习下uniapp的上传图片和预览图片需求:可以拍摄和上 ...
uniapp中上传图片并实时预览
这里只做记录,详细的api请看官方文档 html <view class="pop-contain"><scroll-view scroll-y class=&q ...
个人技术总结——uniapp中editor组件的使用并用图床上传图片
目录一.技术概述二.技术详述 2.1 如何使用editor 2.2 如何实现富文本中添加图片三.问题与解决四.总结五.参考文献一.技术概述在web开发时,我们可以使用contentedi ...
uniapp中隐藏Android虚拟按键
前言: uniapp中如何隐藏Android虚拟按键 (如下图) 解决: 通过h5-plus中的方法,plusready 后调用 https://www.html5plus.org/doc/zh_cn ...
uni-app H5 上传图片
uni-app H5 上传图片 uni-app H5 上传图片环境前端代码预览PDF / 图片后端接口部分代码 Java 请注意:前端代码基本来自官网,以及我个人的使用记录,价值不大,欢迎参 ...
在ASP.NET中上传图片并生成缩略图
在ASP.NET中上传图片并生成缩略图,可以参照下列代码: private void btnUploadPicture_Click(object sender, System.EventArgs e) ...
asp.net中上传图片并生成小图片，自动添加水印的代码 .
asp.net中上传图片并生成小图片,自动添加水印的代码分类: .Net(C#) 2010-03-22 15:28 242人阅读评论(0) 收藏举报 /// 上传图片生成缩略图及水印 (来自:h ...
在WebPart中上传图片到SharePoint图片库,读取Exif信息到图片的自定义属性
SharePoint 图片库是个不错的东西,默认就有很多的视图,省了很多事,上传图片的界面其实功能也很强大,但是有时候并不是完全符合需求,有些东西你没有办法控制,所以有时候我们也在WebPart中上传 ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...

uniapp中上传图片

uniapp上传图片

一、使用ColorUI

二、上传图片

1、html代码片段

2、methods中代码片段:

2.1 选择图片

2.2 上传图片

传递 formdata 格式的图片数据到后台

2.3 预览图片

2.4 取消上传删除图片

uniapp中上传图片相关推荐

最新文章

热门文章

uniapp中上传图片

uniapp上传图片

一、使用ColorUI

二、上传图片

1、html代码片段

2、methods中代码片段:

2.1 选择图片

2.2 上传图片

传递 formdata 格式的图片数据到后台

2.3 预览图片

2.4 取消上传 删除图片

uniapp中上传图片相关推荐

最新文章

热门文章

2.4 取消上传删除图片