之前写过一个使用uniapp和uview上传图片功能,项目测试时用的那个,是可以上传成功的,但是有点问题,代码优化后把现在的贴出来,感觉比之前那个好用(中配)
优化PLUS版:可以从我的资源处下载依赖免费的,文件中引入,预览方法改为,别的不用改(使用下面的上传组件)
previewImage(logourl) {
const ctpic = new Ctpic();
let that = this;
let res = ctpic.app_URLtoBitmap({
base64:logourl //base64数据
})
}
上传组件,是在插件市场下载的,根据自己需求改了改
<template>
<view class="imglistbx">
<view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList" :key='index'>
<!--该处图片路径指向的是base64图片流-->
<image :src="item.messageContent" class="itemImg" @click="previewImage(item.messageContent)" mode="aspectFill"></image>
<icon size="18" type="cancel" class="cancelBtn" @click="deleteImg(item.id,index)" v-if="deleteBtn"></icon>
</view>
<!-- 上传控件 -->
<view :class="['imglistItem',columnNum==3?'column3':'column4']" @click="uploadImg" v-if="showUploadControl">
<view class="itemImg uploadControl">+</view>
</view>
<view class="clear"></view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { pathToBase64, base64ToPath } from '../../js_sdk/gsq-image-tools/image-tools/index.js' //该方法主要用于图片回显预览,即点击放大
export default {
props: {
//是否显示上传控件
control: {
type: Boolean,
default: true
},
//是否显示上删除按钮
deleteBtn: {
type: Boolean,
default: true
},
//行数量 一行显示几个上传图片
columnNum: {
type: [Number, String],
default: 4
},
//上传哪一功能的图片
which: {
type: [String],
default: ""
},
//album 从相册选图,camera 使用相机
sourceType: {
type: Array,
default: function() {
return ['camera', 'album']
}
},
//最大上传数量
maxCount: {
type: [Number, String],
default: 3
},
//服务返回回调的图片数组--回填
mode: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
imgList: [],
showList: [],
showUploadControl: true
}
},
watch: {
mode(v) {
this.init(v)
},
control(v) {
this.showUploadControl = v
},
},
created() {
this.init(this.mode)
},
methods: {
init(v) {
if (this.mode.length != 0) {
this.showList = v;
return
};
this.showList = this.imgList;
},
// 上传图片
uploadImg() {
uni.chooseImage({
sizeType: ['compressed'],
sourceType: this.sourceType,
count: this.maxCount,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
this.$emit("chooseFile",tempFilePaths[0],this.which) //调用父组件的方法,区分是哪个上传功能
}
});
},
//删除图片
deleteImg(id,eq) {
let getUrl = this.handleImg();
uni.showModal({
title: '提示',
content: '您确定删除吗?',
success: (res)=> {
if (res.confirm) {
this.$emit("imgDelete", id, this.which,eq); //我的项目有三个上传,参数主要为id,区分是哪个上传
}
}
});
},
// 预览图片
previewImage(logourl) {
let that = this;
uni.showLoading({
title:"图片处理中..."
})
base64ToPath(logourl) //图片流回显使用,性能不太理想
.then(path => {
let imgsArray = [];
uni.hideLoading()
imgsArray[0] = path;
uni.previewImage({
current: 0,
urls: imgsArray
});
})
.catch(error => {
that.$refs.uToast.show({
title: '图片加载失败',
type: 'warning'
})
uni.hideLoading()
})
},
//返回需要操作的图片数组
//如果是回调了则操作回填后的数组 否则操作临时路径的图片数组
handleImg() {
return this.mode.length > 0 ? this.showList : this.imgList
}
}
}
</script>
<style scoped>
.imglistbx {
width: 100%;
height: 100%;
}
.imglistItem {
position: relative;
float: left;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
.column3 {
width: 33.3333%;
height: 160rpx;
}
.column4 {
width: 25%;
height: 130rpx;
}
.itemImg {
width: 70%;
height: 100%;
margin: 0 auto;
display: block;
border-radius: 10rpx;
}
.cancelBtn {
position: absolute;
top: -10rpx;
right: 10rpx;
}
.uploadControl {
font-size: 50rpx;
color: #888;
background-color: #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
}
.clear {
clear: both;
}
</style>
父组件,页面中使用,引入后
import gUpload from "../../components/g-upload/g-upload.vue"
<view class="selectItem" v-show="flagLung">
<g-upload ref='gUpload' :mode="lungList" @chooseFile="chooseFile" @imgDelete='imgDelete' :control='control' :which="lung"
:columnNum="columnNum"></g-upload>
</view>
chooseFile(v,which) {
this.beforeAvatarUpload(v,which) //v为文件,自动加的,which区分那个上传,页面可能有多个上传
},
beforeAvatarUpload(file,which) {
let param = {};
param.imgType = which;
param.visitId = uni.getStorageSync("visitorItem").id;
this.$uploadFile({
url: '',
filePath:file, //上传的文件
name:"fileName", //后台接受文件标识
formData:{ //额外参数
"param":JSON.stringify(param)
},
success: (res) => {
if (res.data.status == 'SUCCESS') {
this.$refs.uToast.show({
title: '上传成功',
type: 'success'
})
} else {
this.$refs.uToast.show({
title: '上传失败',
type: 'error'
})
}
},
fail: (err) => {
this.$refs.uToast.show({
title: '网络出了小差,请稍后重试',
type: 'error '
})
}
});
},