uniapp小程序的圖片(視頻)上傳的組件封裝方法
更新時(shí)間：2024年02月20日 15:38:35 作者：前端fighter
這篇文章主要介紹了uniapp做小程序的圖片(視頻)上傳的組件封裝,要求實(shí)現(xiàn)多張圖片的上傳 ,可以限制圖片上傳的數(shù)量,圖片預(yù)覽,多次使用對(duì)圖片的上傳順序排序,需要的朋友可以參考下
最近在做小程序，最后想試試新不同的技術(shù)，所以選擇了用uniapp做小程序。
要求實(shí)現(xiàn)多張圖片的上傳 ，可以限制圖片上傳的數(shù)量，圖片預(yù)覽，多次使用對(duì)圖片的上傳順序排序
<template>
<view>
<view class="upload">
<!-- 對(duì)視頻或者圖片進(jìn)行循環(huán) -->
<block v-for="(upload,index) in uploads" :key="index">
<view class="uplode-file">
<!-- 判斷是圖片還是視頻 如果是視頻通過 image 進(jìn)行展示 -->
<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
<!-- 用于取消的圖片 -->
<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
<!-- 如果是視頻通過 video進(jìn)行展示 在視頻標(biāo)簽上面添加個(gè)圖片（刪除圖片用于取消視頻） -->
<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
</video>
</view>
</block>
<!-- 這里是對(duì)于沒有圖片上傳之前的樣式的展示 如果圖片視頻的上傳的數(shù)量大于等于 設(shè)定的圖片上傳的數(shù)量 就對(duì)不在展示 該樣式 這樣的話 就不能繼續(xù)在 上傳圖片了-->
<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
<view style="height: 40upx; height: 25upx;">
</view>
<!-- 這里是對(duì)于上傳圖片的提示 -->
<p class="ziliao" v-for="(item,index) in text" :key="index"> {{item}}</p>
</view>
</view>
<!-- 提交上傳 -->
<button type="primary" v-if="types == 'image'" @tap="upload" >上傳</button>
</view>
</template>
<script>
export default{
// props 接受傳遞過來的值
props: {
// 上傳的圖片的提示
text: {
type: Array,
default: function() {
return []
}
},
// 用于判斷上傳的是圖片還是視頻
types: {
type: String,
default: 'image'
},
// 圖片上傳的路徑
dataList: {
type: Array,
default: function() {
return []
}
},
// 圖標(biāo) 用于去除已經(jīng)選中的圖片
clearIcon: {
type: String,
default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
},
// 上傳的圖片的樣式 比如說是個(gè)相機(jī) 還是加號(hào)
uploadIcon: {
type: String,
default: ''
},
// 需要將圖片上傳到服務(wù)器的 地址
uploadUrl: {
type: String,
default: ''
},
// 刪除圖片的地址
deleteUrl: {
type: String,
default: ''
},
// 設(shè)置上傳圖片或視頻的數(shù)量
uploadCount: {
type: Number,
default: 1
},
//上傳圖片大小 默認(rèn)3M
upload_max: {
type: Number,
default: 3
},
disable:{
type: Boolean,
default: true,
}
},
data(){
return {
//上傳的圖片地址
uploadImages: [],
//展示的圖片地址
uploads: [],
// 超出限制數(shù)組
exceeded_list: [],
}
},
mounted(){
// 對(duì)上傳圖片做個(gè)判斷
this.uploads = this.dataList
},
methods:{
previewImage (e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.dataList
})
},
chooseUploads(){
switch (this.types){
case 'image':
uni.chooseImage({
count: this.uploadCount - this.uploads.length, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], //從相冊選擇
success: (res) => {
for(let i = 0; i< res.tempFiles.length; i++){
if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
this.uploads.push(res.tempFiles[i].path)
this.uploadImages.push(res.tempFiles[i].path)
}else {
this.exceeded_list.push(i === 0 ? 1 : i + 1);
uni.showModal({
title: '提示',
content: `第${[...new Set(this.exceeded_list)].join(',')}張圖片超出限制${this.upload_max}MB,已過濾`
});
}
}
},
fail: (err) => {
uni.showModal({
// content: JSON.stringify(err)
content: '選擇被取消'
});
}
});
break;
case 'video' :
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: (res) => {
if(Math.ceil(res.size / 1024) < this.upload_max * 1024){
this.uploads.push(res.tempFilePath)
uni.uploadFile({
url: this.uploadUrl, //僅為示例，非真實(shí)的接口地址
filePath: res.tempFilePath,
name: 'file',
//請求參數(shù)
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
this.$emit('successVideo',uploadFileRes)
}
});
}else {
uni.showModal({
title: '提示',
content: `第${[...new Set(this.exceeded_list)].join(',')}張視頻超出限制${this.upload_max}MB,已過濾`
});
}
},
fail: (err) => {
uni.showModal({
// content: JSON.stringify(err)
content: '確認(rèn)取消？'
});
}
});
break;
}
},
delImage(index){
//第一個(gè)是判斷app或者h(yuǎn)5的 第二個(gè)是判斷小程序的
if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
this.uploads.splice(index,1)
return;
};
if(!this.deleteUrl) {
uni.showModal({
content: '請?zhí)顚憚h除接口'
});
return;
};
uni.request({
url: this.deleteUrl,
method: 'DELETE',
data: {
image: this.dataList[index]
},
success: res => {
console.log(123456);
if(res.data.status == 1) {
uni.showToast({
title: '刪除成功'
})
this.uploads.splice(index,1)
}
},
});
},
upload(){
var _this = this
var j = 0
if(!this.disable){
uni.showModal({
content: '請先上傳上面的喲'
});
return;
}
if(!this.uploadUrl) {
uni.showModal({
content: '請?zhí)顚懮蟼鹘涌?
});
return;
};
if(this.uploadImages.length < 1){
uni.showModal({
content: '請選擇圖片'
});
return;
}
if(this.uploadImages.length < this.uploadCount){
uni.showModal({
content: '請確認(rèn)上傳的數(shù)量為' + this.uploadCount + '張'
});
return;
}
for (let i of this.uploadImages) {
uni.uploadFile({
url: this.uploadUrl, //僅為示例，非真實(shí)的接口地址
filePath: i,
name: 'images[]',
//請求參數(shù)
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
this.$emit('successImage',uploadFileRes)
j++
console.log(j)
if( j == _this.uploadCount){
this.$emit('successImages',true)
}
}
});
}
}
}
}
</script>
<style scoped>
.ziliao{
margin-top: 15upx;
text-align: center;
font-family: MicrosoftYaHei;
font-size: 20upx;
font-weight: normal;
font-stretch: normal;
line-height: 32upx;
letter-spacing: 0upx;
color: #c8c8c8;
}
button{
background-color: #f05a23;
width: 95%;
}
.upload {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uplode-file {
margin: 10upx;
width: 210upx;
height: 210upx;
position: relative;
}
.uploade-img {
display: block;
width: 210upx;
height: 210upx;
}
.clear-one{
position: absolute;
top: -10rpx;
right: 0;
}
.clear-one-icon{
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
z-index: 9;
}
.uploader-input-box {
position: relative;
margin:10upx;
width: 208upx;
height: 208upx;
border: 2upx solid #D9D9D9;
}
.uploader-input-box:before,
.uploader-input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #D9D9D9;
}
.uploader-input-box:before {
width: 4upx;
height: 79upx;
}
.uploader-input-box:after {
width: 79upx;
height: 4upx;
}
.uploader-input-box:active {
border-color: #999999;
}
.uploader-input-box:active:before,
.uploader-input-box:active:after {
background-color: #999999;
}
.uploader-input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.uploader-icon{
position: relative;
margin:10upx;
width: 208upx;
height: 208upx;
}
.uploader-icon .image-cion{
width: 100%;
height: 100%;
}
</style>使用方式：
<easyupload
:text="text" :dataList="imageList"
uploadUrl="http://sunshine.createnetwork.cn/api/uploadimage"
:types="category"
deleteUrl='http://sunshine.createnetwork.cn/api/uploadimage'
:uploadCount="2"
disable = true
@successImage="successImage"
@successVideo="successvideo"
@successImages="successImages"
class="sxzl"
></easyupload>
<easyupload
:text="text1"
:dataList="imageList"
uploadUrl="http://sunshine.createnetwork.cn/api/uploadimage"
:types="category"
deleteUrl='http://sunshine.createnetwork.cn/api/uploadimage'
:uploadCount="2"
:disable= 'Drivinglicense'
@successImage="successImage"
@successVideo="successvideo"
@successImages="successImages"
class="sxzl"
></easyupload>
<script>
// 導(dǎo)入注冊組件
import easyupload from "@/common/easy-upload.vue"
export default {
components:{
easyupload
},
data() {
return {
tx_details:'',
Drivinglicense: false,
data:{
phone:'',
plate_number:'',
type_id:'',
id_card:[],
driving_card:[],
name:''
},
news:'',
right_select_num:0,
text:["身份證正面","身份證反面"],
text1:["行駛證正頁","行駛證副頁"],
imageList: [],
category: 'image',
car1:"請選擇車品牌",
};
},
watch:{
// 對(duì)數(shù)據(jù)進(jìn)行深度監(jiān)聽 用于設(shè)置使用組件的順序 （多次使用組件并且需要考慮順序的情況下使用）
'data.id_card':{
handler(newName, oldName) {
// console.log('data.id_card', chnsg.length,oldName);
( oldName.length >= 2) ? (this.Drivinglicense = true) : (this.Drivinglicense = false)
console.log(this.Drivinglicense);
},
immediate: true,
deep: true,
}
},
methods:{
successImages(e){
if(e){
uni.showModal({
content : '圖片上傳成功'
})
}
},
successImage(e){
console.log(JSON.parse(e.data).data)
this.Drivinglicense ?this.data.driving_card.push(JSON.parse(e.data).data[0]) : this.data.id_card.push(JSON.parse(e.data).data[0])
console.log(this.data.id_card,this.data.driving_card);
},
successvideo(e){
console.log(e)
},
}
}
</script>使用效果：
這是圖片預(yù)覽效果：
對(duì)圖片上傳數(shù)量的限制
圖片上傳成功提示
取消選擇選擇圖片提示
對(duì)于圖片上傳順序的限制
沒有選擇圖片的提示
選擇圖片后效果
到此這篇關(guān)于uniapp做小程序的圖片(視頻)上傳的組件封裝的文章就介紹到這了,更多相關(guān)uniapp小程序上傳的組件封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas畫圖，并實(shí)現(xiàn)分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
本文為大家介紹下使用expression固定表格行列，這是一種在IE下適用的固定行列的方法，感興趣的朋友可以學(xué)習(xí)下，希望對(duì)大家有所幫助2013-07-07
javascript中replace()在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。2008-11-11
echart簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡介，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
在《理解Javascript_12_執(zhí)行模型淺析》一文中,我們初步的了解了執(zhí)行上下文與作用域的概念，那么這一篇將深入分析執(zhí)行上下文的構(gòu)建過程，了解執(zhí)行上下文、函數(shù)對(duì)象、作用域三者之間的關(guān)系。2010-10-10
JS打開圖片另存為對(duì)話框?qū)崿F(xiàn)代碼
使用JS打開圖片另存為對(duì)話框一直都是網(wǎng)頁應(yīng)用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些實(shí)現(xiàn)代碼，不知道符不符合大眾的口味，在此班門弄斧了，需要的朋友可以了解下2012-12-12
基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【四】Bootstrap圖標(biāo)的提取和利用
通過本文主要介紹如何提取Bootstrap的圖標(biāo)信息，存儲(chǔ)到數(shù)據(jù)庫里面為我所用，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
今天小編就為大家分享一篇layui按條件隱藏表格列的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
真見識(shí)了-全代碼編寫的圖片...2007-08-08
JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關(guān)資料,需要的朋友可以參考下2016-02-02