uniapp中上传图片

一、使用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.tempFilePaths
						that.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 = this
				let param  = {
					biz:'temp'
				}
				uni.uploadFile({
					//开发者服务器 url
					url: 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)
						}
					}
				})
			}