uniapp上传图片
一、使用ColorUI
在uniapp项目中使用了ColorUI的一些样式,所以就在这里再记录一下使用方法
uniapp项目中引入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)
}
}
})
}