前端vue点击图片上传(带封装方法)-编程知识

第一种

直接用，图片路径自己换一下

<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 {// 点击上传图片upload() {uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有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: {/*打开相机或者相册，选择图片*/chooseImageFunc() {let self=this;uni.chooseImage({count: self.$props.num || 9, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有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

<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() {// 封装的完整的上传图片startimages: [],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>

第三种实战

图片

请添加图片描述

代码

<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, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有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图片上传判断一个数组长度空上传，不为空修改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数据');},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);},// 提交修改调用接口上传图片参数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.imgListwx_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>