第一種
直接用，圖片路徑自己換一下
<template>
<view class="uPImg">
<view class="Img">上傳照片 :</view>
<view class="shangchuan">
<view class="sc2" v-for="(item, index) in imgList" :key="index">
<image class="del" @click="del(index)" src="../../../static/property/paymentUpload.png" mode="">
</image>
<image class="Img3" :src="item" mode=""></image>
</view>
<view class="sc2" v-if="imgList.length < 3" @click="upload">
<image class="sc3" src="../../../static/property/paymentUpload.png" mode=""></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
imgList: [],
},
methods {
// 點(diǎn)擊上傳圖片
upload() {
uni.chooseImage({
count: 1, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album'], //從相冊選擇
loop: true,
success: res => {
console.log(res);
if (res.tempFilePaths.length != 0) {
this.imgList.push(res.tempFilePaths[0]);
}
console.log(JSON.stringify(res.tempFilePaths));
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
console.log(tempFilePaths[0]);
uni.uploadFile({
url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',
filePath: tempFilePaths[0],
name: 'file',
success: uploadFileRes => {
console.log('上傳圖片', JSON.parse(uploadFileRes.data));
},
fail(err) {
console.log(err);
}
});
}
});
},
// // 刪除圖片
del(index) {
this.imgList.splice(index, 1);
console.log(this.imgList);
},
}
}
</script>
<style>
</style>
第二種封裝方法
封裝組件upload.vue
直接用，圖片路徑自己換一下
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
/*需要返回的圖片*/
imageList:[]
};
},
onLoad() {},
props:['num'],
mounted() {
this.chooseImageFunc();
},
methods: {
/*打開相機(jī)或者相冊，選擇圖片*/
chooseImageFunc() {
let self=this;
uni.chooseImage({
count: self.$props.num || 9, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], //從相冊選擇
success: function(res) {
self.uploadFile(res.tempFilePaths);
},
fail:function(res){
self.$emit('getImgs',null);
},
complete:function(res){
}
});
},
/*上傳圖片*/
uploadFile: function(tempList) {
let self = this;
let i = 0;
let img_length=tempList.length;
let params = {
token: uni.getStorageSync('token'),
app_id: self.getAppId()
};
uni.showLoading({
title: '圖片上傳中'
});
tempList.forEach(function(filePath, fileKey) {
uni.uploadFile({
url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
filePath: filePath,
name: 'iFile',
formData: params,
success: function(res) {
let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
if (result.code === 1) {
self.imageList.push(result.data);
}else{
self.showError(result.msg);
}
},
complete: function() {
i++;
if (img_length === i) {
uni.hideLoading();
// 所有文件上傳完成
self.$emit('getImgs',self.imageList);
}
}
});
});
}
}
};
</script>
<style></style>
使用組件
引入上面upload.vue文章來源：http://www.zghlxwxcb.cn/news/detail-706937.html
<template>
<view class=" payment_right">
<!-- <image src="../../../static/property/paymentUpload.png" mode=""></image>
<!-- 封裝完整的上傳圖片start -->
<view class="uploadBox d-s-e">
<view class="item" v-for="(imgs,img_num) in images" :key="img_num" @click="deleteFunc(imgs)">
<image :src="imgs.file_path || imgs" mode="aspectFit"></image>
</view>
<view class="item d-c-c d-stretch" v-if="images.length<1">
<!-- <view class="upload-btn d-c-c d-c flex-1" @click="openUpload()">
<image src="../../../static/property/paymentUpload.png"></image>
</view> -->
<view class=" flex-1" @click="openUpload()">
<image width="100px" height="100px" src="../../../static/property/paymentUpload.png">
</image>
</view>
</view>
</view>
<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
<!-- 封裝完整的上傳圖片end -->
</view>
</template>
<script>
import Upload from '@/components/upload/upload.vue';
export default {
components: {
Upload,
},
data() {
// 封裝的完整的上傳圖片start
images: [],
isUpload: false,
// 封裝的完整的上傳圖片end
},
methods {
// 封裝的完整的上傳圖片start
// 上傳微信收款碼 刪除圖片
deleteFunc(e) {
this.images.splice(e, 1);
},
/*獲取圖片*/
getImgsFunc(e) {
let self = this;
self.isUpload = false;
if (e && typeof(e) != 'undefined') {
let this_length = self.images.length,
upload_length = e.length;
if (this_length + upload_length < 2) {
self.images = self.images.concat(e);
} else {
let leng = 1 - this_length;
for (let i = 0; i < leng; i++) {
self.images.push(e[i]);
}
}
}
this.pay_image = e[0].file_path
// console.log(e, '獲取所有圖片');
console.log(e[0].file_path, '圖片路徑');
},
/*上傳*/
openUpload() {
this.isUpload = true;
// console.log('打開');
},
// 封裝完整的上傳圖片end
}
}
</script>
<style lang="scss" scoped>
.payment_right {
// width: 440rpx;
// height: 220rpx;
.uploadBox .item {
width: 220rpx;
height: 220rpx;
}
}
</style>
第三種實(shí)戰(zhàn)
圖片
文章來源地址http://www.zghlxwxcb.cn/news/detail-706937.html
代碼
<template>
<view class="box">
<!-- 圖片上傳 -->
<view class="bindingBox">
<view class=" payment_rightSSS">
<view class="shangchuan">
<view class="sc2" v-for="(item, index) in imgList" :key="index">
<view @click="del(index)" class="dells">
</view>
<img class="shangchuan_img" :src="item" mode="aspectFit"></img>
</view>
<view class="sc2 gray6 imgUploads" v-if="imgList.length < 1" @click="getUpload">
<image src="../../../../static/property/paymentUpload.png">
</image>
</view>
</view>
</view>
</view>
<div class="buttonBox">
<view class="bindingModifyBtn" @click="getUpload">
修改
</view>
<view class="bindingSubmitBtn" @click="bankSubmit">
提交
</view>
</div>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
imgList: [],
}
},
onShow() {},
mounted() {},
onLoad() {},
methods: {
// 打開相冊
getUpload() {
let self = this;
uni.chooseImage({
count: 1, //默認(rèn)9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album'], //從相冊選擇
loop: true,
success: function(res) {
self.uploadFile(res.tempFilePaths);
// console.log(res,'路徑啊啊啊啊啊');
},
});
},
/*上傳圖片 */
uploadFile: function(tempList) {
let self = this;
let i = 0;
let img_length = tempList.length;
let params = {
token: uni.getStorageSync('token'),
app_id: self.getAppId()
};
uni.showLoading({
title: '圖片上傳中'
});
tempList.forEach(function(filePath, fileKey) {
uni.uploadFile({
url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
filePath: filePath,
name: 'iFile',
formData: params,
success: function(res) {
// let result = typeof res.data === 'object' ? res.data :
// JSON.parse(res.data);
// if (result.code === 1) {
// self.imgList.push(result.data);
// } else {
// self.showError(result.msg);
// }
console.log(res);
let list = JSON.parse(res.data);
let filePath = list.data.file_path;
// 圖片賦值到里面
// self.imgList.push(list.data.file_path);
// uniapp圖片上傳判斷一個(gè)數(shù)組長度空上傳，不為空修改
if (self.imgList.length == []) {
self.imgList.push(list.data.file_path);
} else if (self.imgList.length !== []) {
self.imgList = [list.data.file_path]
}
// console.log(list.data.file_path, '路徑路徑路徑路徑');
// console.log(self.imgList, 'datadataself.imgList數(shù)據(jù)');
},
complete: function() {
i++;
if (img_length === i) {
uni.hideLoading();
// 所有文件上傳完成
// self.$emit('getImgs', self.imgList);
self.imgList
}
}
});
});
},
// // 刪除圖片
del(index) {
this.imgList.splice(index, 1);
uni.removeStorageSync('file_path');
// console.log(this.imgList);
},
// 提交修改調(diào)用接口上傳圖片參數(shù)
bankSubmit() {
let self = this;
if (self.imgList == 0) {
uni.showToast({
title: '請上傳微信收款碼',
duration: 2000,
icon: 'none'
});
return;
}
uni.showModal({
title: '提示',
content: '您確定提交嗎?',
success: function(o) {
if (o.confirm) {
uni.showLoading({
title: '正在處理'
});
self._post(
'user.user/bindUserWithdrawData', {
type: '1',
// wx_code_pic:self.imgList
wx_code_pic: self.imgList.join()
},
function(res) {
uni.hideLoading();
uni.showToast({
title: '操作成功',
duration: 2000,
icon: 'success'
});
uni.setStorageSync('file_path', String(self.imgList));
// 存本地
// uni.setStorageSync('filePath', String(self.imgList));
}
);
}
}
});
}
},
}
</script>
<style lang="scss" scoped>
.bindingBox {
// display: flex;
// flex-direction: column;
// padding: 0 32rpx;
// box-sizing: border-box;
// display: flex;
// justify-content: space-between;
// align-items: center;
// padding: 30rpx 20rpx;
// box-sizing: border-box;
// font-size: 30rpx;
background-color: #FFFFFF;
.payment_rightSSS {
// .uploadBox .item {
// width: 220rpx;
// height: 220rpx;
// }
display: flex;
justify-content: center;
align-items: center;
.shangchuan {
width: 300rpx;
height: 300rpx;
// border: 1rpx solid red;
.sc2 {
position: relative;
// border: 1rpx solid lightseagreen;
.shangchuan_img {
// width: 200rpx;
width: 300rpx;
height: 300rpx;
position: relative;
// left: 52rpx;
z-index: 9;
}
.dells {
position: absolute;
width: 100%;
height: 100%;
// border: 1rpx solid red;
z-index: 10;
}
}
.imgUploads {
width: 300rpx;
height: 300rpx;
img {
width: 100%;
height: 100%;
border: 1rpx solid deeppink;
}
}
}
}
}
.buttonBox {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
margin: 100rpx auto;
.bindingModifyBtn {
background-color: red;
width: 160px;
height: 48px;
line-height: 48px;
opacity: 1;
border-radius: 8px;
border: none;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.bindingSubmitBtn {
background-color: red;
width: 160px;
height: 48px;
line-height: 48px;
opacity: 1;
border-radius: 8px;
border: none;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
}
</style>
到了這里，關(guān)于前端vue點(diǎn)擊圖片上傳(帶封裝方法)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
