#私藏项目实操分享#
uniapp
<view class = "upload">
<image :src="noAvatar" class="avatarImg" v-if="avatar===''" @click="upload()"></image>
<image :src="avatar" class="avatarImg" v-else @click="del()"></image>
</view>
data: {
avatar: '',
}
upload() {
uni.chooseImage({
count: 1,//图片张数
success: (res) => {
this.avatar = res.tempFilePaths[0];//第一张本地图片上传地址路径
}
}),
del() {
},
uni.uploadFile({
url:'',
filePath: '',
name: '',
header: {},
success: (res => {})
})
}<!--<view> <view class="upload"> <text>头像：</text> <view class="box" @click="upload"> <image class="box-img" :src="avatar" mode="" style="border: 1px solid;"></image> </view> </view> <button class="login" type="primary" @click="sub()">提交</button></view>-->avatar: '',/*upload(){ uni.chooseImage({ count:1, success: (res)=>{ this.avatar=res.tempFilePaths[0] console.log("res===", res); } }) }, sub() { uni.uploadFile({ url: this.$commonImage.pageBasePath + '/fileApi/upload?itemCode=0020010049&batchCode=' + this.$utils.randomNum(20), //仅为示例，非真实的接口地址
filePath: this.avatar, name: 'file', header: { 'Api-Version': "2.0", 'Call-Source': "WEB", 'Authorization': uni.getStorageSync('Authorization') !== undefined ? uni.getStorageSync('Authorization') : '', }, success: (res => { console.log("res===", res); }) }) },*/wei
chooseImageWeiXin('image');//传值上传什么类型图片
chooseImageWeiXin(who){
uni.chooseImage({
count: 1,//最多可以选择图片张数
success: (res) => {
let tempFileSize=res.tempFiles[0].size;
let tempFilePaths = res.tempFilePaths;
if(tempFileSize <= 20000000){
if(who==='storeIcon'){//根据类型传递不同的itemCode图片临时路径
this.upLoadImg(tempFilePaths[0],who,'0020010045');//传递临时图片路径+类型名+域名code
}
else if(who==='urlFront'){
this.upLoadImg(tempFilePaths[0],who,'0020010062');
}
else if(who==='urlBack'){
this.upLoadImg(tempFilePaths[0],who,'0020010063');
}
else if(who==='storeLicense'){
this.upLoadImg(tempFilePaths[0],who,'0020010075');
}
else {
//0020010049
this.upLoadImg(tempFilePaths[0],who,'0020010049');
}
}else{
uni.showToast({title: '上传图片不能大于20M!',icon: 'none'})
}
},
fail: (err) => {
console.log(err);
}
})
}
//上传图片
upLoadImg(filePath,who,itemCode){//拿到图片临时路径+图片类型名+图片域名code上传图片
let _self=this;
uni.uploadFile({
url: this.$commonImage.pageBasePath+'/fileApi/upload?itemCode='+itemCode+'&batchCode='+this.$utils.randomNum(20), //仅为示例，非真实的接口地址
filePath: filePath,
name: 'file',
header: {
'Api-Version': "2.0",
'Call-Source': "WEB",
'Authorization': uni.getStorageSync('Authorization') !== undefined ? uni.getStorageSync('Authorization') : '',
},
success: (res) => {
let upImgObj = JSON.parse(res.data);
//upImgObj.data.serverPath
if(who==='storeIcon'){
_self.storeIcon=upImgObj.data.serverPath;//返回上传cdn图片路径
}
else if(who==='urlFront'){
_self.urlFront = upImgObj.data.serverPath;
}
else if(who==='urlBack'){
_self.urlBack = upImgObj.data.serverPath;
}
else if(who==='storeLicense'){
_self.storeLicense = upImgObj.data.serverPath;
}
else{
_self.image=upImgObj.data.serverPath;
}
// this.urlFront = urlFront;
},
})
},<view class="upload">
<!-- #ifdef MP-WEIXIN -->
//没有图片显示默认图片
<image :src="getImage.uploadBannerImg" class="img" v-if="image===''" style="width: 95%!important;" mode="widthFix"
@click="chooseImageWeiXin('image')" alt=""></image>
//有图片显示上传的图片加删除按钮
<image :src="filePath+image" class="img" style="width: 95%!important;" mode="widthFix" alt="" v-else></image>
<text class="iconfont icon-delete clearImg" v-if="image!==''" @click="btnDelete"></text>
<!-- #endif -->
<!-- #ifdef H5 -->
<image :src="getImage.uploadBannerImg" class="img" v-if="image===''" style="width: 95%!important;" mode="widthFix"
@click="chooseImage1('image')" alt=""></image>
<image :src="filePath+image" class="img" style="width: 95%!important;" mode="widthFix" alt="" v-else></image>
<text class="iconfont icon-delete clearImg" v-if="image!==''" @click="btnDelete"></text>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<image :src="getImage.uploadBannerImg" class="img" v-if="image===''" style="width: 95%!important;" mode="widthFix"
@click="chooseImage1('image')" alt=""></image>
<image :src="filePath+image" class="img" style="width: 95%!important;" mode="widthFix" alt="" v-else></image>
<text class="iconfont icon-delete clearImg" v-if="image!==''" @click="btnDelete"></text>
<!-- #endif -->
</view>d
<!--<view class="uni-form-item uni-column">
<view class="title star">营业执照</view>
<upload-image :itemCode="itemCode" :maxAccount="maxAccount" :imageList="imageList"
:filePath="getImage.filePath"
v-on:handleImagePath="chooseImageWeiXin('uniformSocialCreditCode')"></upload-image>
</view>-->
<!--<view class="uni-form-item uni-column">
<view class="title star">营业执照复印件</view>
<upload-image :itemCode="itemCode" :maxAccount="maxAccount" :imageList="imageList"
:filePath="getImage.filePath"
v-on:handleImagePath="chooseImageWeiXin('uniformSocialCreditLicense')"></upload-image>
</view>-->
<!--<view class="uni-form-item uni-column">
<view class="title star">法人身份证</view>
<upload-image :itemCode="itemCode" :maxAccount="maxAccount" :imageList="imageList"
:filePath="getImage.filePath"
v-on:handleImagePath="handleImagePath"></upload-image>
<upload-image :itemCode="itemCode" :maxAccount="maxAccount" :imageList="imageList"
:filePath="getImage.filePath"
v-on:handleImagePath="handleImagePath"></upload-image>
</view>-->
Request URL: https://finder-assistant.mp.video.tencent-cloud.com/snsuploadsimple
Request Method: POST
Status Code: 200 OK
e.detail = {avatarUrl: "http://tmp/q2zhQY6hNl2eb075c0f4921337c978c6606a1fb99cc7.png"}
api
api接口 https://lingdianyi.gfcylm.com/api/fileApi/upload
参数 ?itemCode=0020010003&batchCode=2022126978281728
方法 post
生成随机数 console.log((beginNum + endNum).length, beginNum + endNum); //18 "202212693810681762"
返回 res.data.data.serverPath
General {
Request URL: https://lingdianyi.gfcylm.com/api//fileApi/upload?itemCode=0020010003&batchCode=2022126978281728
Request Method: post
Status Code: 200
}
Request Hdaders {
Api-Version: 2.0
Call-Source: WEB
Authorization: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjdXJyZW50VGltZU1pbGxpcyI6IjE2NzAyNDY3MDg3MTkiLCJleHAiOjE2NzAyNDczMDgsInVzZXJuYW1lIjoibWVtYmVyXzE4MTM3MjY3NTEwIn0.cS_rZM4CxM2P_hmh0ixKCtI1aTPVWA5ZiPWnewIxhVI
}<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="line-height: 0">
<image class="defaultAvatar" :src="avatar" :showArrow="false" mode="widthFix"></image>
</button>
itemCode:'0020010003',//图片上传到哪里
memberInfo: {}
async onLoad() {
let memberInfo = await this.$utils.memberInfo();
this.memberInfo = memberInfo;
},
//上传图片
upLoadImg(filePath){
let _self=this;
uni.uploadFile({
url: this.$commonImage.pageBasePath+'/fileApi/upload?itemCode='+this.itemCode+'&batchCode='+this.$utils.randomNum(20), //仅为示例，非真实的接口地址
filePath: filePath,
name: 'file',
header: {
'Api-Version': "2.0",
'Call-Source': "WEB",
'Authorization': uni.getStorageSync('Authorization') !== undefined ? uni.getStorageSync('Authorization') : '',
},
success: (res) => {
let upImgObj = JSON.parse(res.data);
//更新资料
let member = {
id: uni.getStorageSync("accountId"),
avatar: upImgObj.data.serverPath,
};
this.$Request.post(_self.$api.user.account + member.id, 'PUT', member).then(result => {
if (result.data.code === 1) {
uni.showToast({title: "修改成功!"});
this.memberInfo.avatar=upImgObj.data.serverPath;
}
});
},
})
},
async onChooseAvatar(e) {
let wc = 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqJcCoK0QXlGrkKbvgQHRWQNNq1GbhLUNt1C2ianWFB0ibON9GB8Fsy2UfzcAMqx8yS3ibFNOaHib2Yww/132';
console.log("e",e.detail);
let filePath = e.detail.avatarUrl;
let _self = this;
uni.uploadFile({
url: this.$commonImage.pageBasePath+'/fileApi/upload?itemCode='+this.itemCode+'&batchCode='+this.$utils.randomNum(20), //仅为示例，非真实的接口地址
filePath: filePath,
name: 'file',
header: {
'Api-Version': "2.0",
'Call-Source': "WEB",
'Authorization': uni.getStorageSync('Authorization') !== undefined ? uni.getStorageSync('Authorization') : '',
},
success: res => {
let upImgObj = JSON.parse(res.data);
console.log("upImgObj===", upImgObj);
let member = {
id: uni.getStorageSync("accountId"),
avatar: upImgObj.data.serverPath,
}
if (upImgObj.code===1) {
_self.$Request.post(_self.$api.user.account + member.id, "PUT", member).then(res => {
if (res.data.code === 1) {
uni.showToast({title: '修改成功！'});
_self.memberInfo.avatar = upImgObj.data.serverPath;
}
}, err => {
console.log("err: ", err)
});
} else {
uni.showToast({
icon: 'none',
title: '图片太大,请重新选择！'
})
}
},
fail: err => {
console.log("err: ",err);
},
})
},
code: 1
data: {
extensionName: "png"
fileId: "23dd270f2da74ffcabc4227cb8c84cee"
fileName: "V6clpYfaHHflb075c0f4921337c978c6606a1fb99cc7"
fileSize: 19013
serverPath: "upload/account/avatar/20221206_636423.png"
}
msg: "æå"
Request URL: https://lingdianyi.gfcylm.com/api/accountApi/aa7056504a484feb89510811cfa38c3d
Request Method: PUT
Status Code: 200
avatar: "upload/account/avatar/20221206_979149.png"
id: "aa7056504a484feb89510811cfa38c3d"
code: 1
data: {
accountRole: null
activateStatus: null
avatar: "upload/account/avatar/20221206_070527.png"
createPerson: "6f7202a2fb9947a6aa2d21a766483afc"
createTime: "2022-06-07 15:25:49"
description: null
email: ""
id: "aa7056504a484feb89510811cfa38c3d"
isDel: 0
lastLoginIp: "125.40.67.94"
lastLoginTime: "2022-12-05 11:58:41"
loginIp: "125.40.67.94"
loginNumber: 236
loginTime: "2022-12-05 21:25:09"
mobile: "18137267510"
nickName: null
password: "4b713369184a896b818f54621494466c6440f3fcc2f4149cb71add64"
randomSum: null
status: 1
updatePerson: null
updateTime: "2022-12-06 08:58:44"
username: "18137267510"
}
msg: "成功"
微信小程序中如何实现相册选择和拍照
这篇文章主要介绍微信小程序中如何实现相册选择和拍照，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
微信小程序 拍照和相机选择详解
前言：
小程序中获取图片可通过两种方式得到，第一种是直接打开微信内部自己的样式，第一格就是相机拍照，后面是图片，第二种是弹框提示用户是要拍照还是从相册选择，下面一一来看。
选择相册要用到wx.chooseImage(OBJECT)函数，具体参数如下：
直接来看打开相机相册的代码：
Page({
data: {
tempFilePaths: ''
},
onLoad: function () {
},
chooseimage: function () {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
that.setData({
tempFilePaths: res.tempFilePaths
})
}
})
},
