mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 17:23:26 +08:00
【调整】因微信小程序已取消【getUserProfile】方法,移除【同步微信昵称头像】功能。
【新增】个人头像上传增加图片压缩功能,并调整为上传base64到接口端存储。 【调整】修改个人资料后自动跳转个人中心。
This commit is contained in:
@@ -415,6 +415,11 @@ const install = (Vue, vm) => {
|
||||
let getTypeDetail = (params, config = {}) => http.post('/Api/TopUp/getTypeDetail', params, { custom: { methodName: 'topUp.getTypeDetail', needToken: false } });
|
||||
|
||||
|
||||
|
||||
//本地选择图片转base64,再上传服务器存储返回地址
|
||||
let uploadFilesFByBase64 = (params, config = {}) => http.post('/Api/Common/UploadFilesFByBase64', params, { custom: { methodName: 'topUp.uploadFilesFByBase64', needToken: true } });
|
||||
|
||||
|
||||
// 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
|
||||
vm.$u.api = {
|
||||
shopConfigV2,
|
||||
@@ -611,8 +616,10 @@ const install = (Vue, vm) => {
|
||||
getLiveInfo,
|
||||
|
||||
getTopUpTypeList,
|
||||
getTypeDetail
|
||||
getTypeDetail,
|
||||
|
||||
|
||||
uploadFilesFByBase64
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
159
CoreCms.Net.Uni-App/CoreShop/components/w-compress/compress.js
Normal file
159
CoreCms.Net.Uni-App/CoreShop/components/w-compress/compress.js
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* 图片压缩
|
||||
* @param {String} imgUrl 需要压缩的图片路径
|
||||
* @param {Object} self 必传,当前组件对象
|
||||
* @param {Object} options 压缩参数
|
||||
* width: 压缩到多宽,默认图片宽度(待优化,传入宽度,应计算高度)
|
||||
* height: 压缩到多高,默认图片高度
|
||||
* pixels: 压缩图片的最大分辨率,默认二百万
|
||||
* quality: 压缩质量,默认0.8
|
||||
* type: 获取的base64类型,默认jpg
|
||||
* base64: 是否返回base64,默认true(非H5有效)
|
||||
* @return {Promise}
|
||||
* reject
|
||||
* code
|
||||
* -1: 获取图片信息错误
|
||||
* -2: 极大可能创建图片对象出错(h5会出现,出现概率无限接近0)
|
||||
* -3: canvas转图片错误(小程序会出现)
|
||||
* -4: 图片转base64错误(小程序会出现)
|
||||
*/
|
||||
|
||||
// 图片分辨率压缩
|
||||
const calcImageSize = (res, pixels) => {
|
||||
let imgW, imgH
|
||||
imgW = res.width
|
||||
imgH = res.height
|
||||
|
||||
let ratio
|
||||
if((ratio = imgW * imgH / pixels) > 1) {
|
||||
ratio = Math.sqrt(ratio)
|
||||
imgW = parseInt(imgW / ratio)
|
||||
imgH = parseInt(imgH / ratio)
|
||||
} else {
|
||||
ratio = 1
|
||||
}
|
||||
|
||||
return { imgW, imgH }
|
||||
}
|
||||
|
||||
const urlTobase64 = (url, type) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: url,
|
||||
encoding: 'base64',
|
||||
success: res => {
|
||||
let base64 = res.data
|
||||
base64 = `data:image/${type};base64,${base64}`
|
||||
resolve(base64)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const compress = (imgUrl, slef, options={}) => {
|
||||
/*************** 参数默认值 ***************/
|
||||
const MAX_PIXELS = 2000000 // 最大分辨率,宽 * 高 的值
|
||||
const MAX_QUALITY = 0.8 // 压缩质量
|
||||
const IMG_TYPE = 'jpg'
|
||||
const CANVAS_ID = 'compress_canvas'
|
||||
const BASE_64 = false
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: imgUrl,
|
||||
success: res => {
|
||||
let pixels = options.pixels || MAX_PIXELS
|
||||
let quality = options.quality || MAX_QUALITY
|
||||
let type = options.type || IMG_TYPE
|
||||
let canvasId = options.canvasId || CANVAS_ID
|
||||
let isBase64 = options.base64 || BASE_64
|
||||
|
||||
let { imgW, imgH } = calcImageSize(res, pixels)
|
||||
let w = options.width || imgW
|
||||
let h = options.height || imgH
|
||||
// #ifdef H5
|
||||
type = type == 'jpg' ? 'jpeg' : type,
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
type = type == 'png' ? 'png' : 'jpg',
|
||||
// #endif
|
||||
console.log(`%c 宽: ${w} %c 高: ${h} %c 分辨率: ${w * h} %c 质量: ${quality} %c 类型: ${type}`, 'color:#f00', 'background-color:#f60;color:#fff', 'color:#F00', 'background-color:#f60;color:#fff', 'color:#F00')
|
||||
|
||||
// #ifdef H5
|
||||
let img = new Image()
|
||||
img.src = res.path
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
let drawW = w, drawH = h
|
||||
|
||||
ctx.drawImage(img, 0, 0, drawW, drawH)
|
||||
|
||||
let base64 = canvas.toDataURL(`image/${type}`, quality)
|
||||
|
||||
resolve(base64)
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// 非h5
|
||||
// #ifndef H5
|
||||
slef.height = h
|
||||
slef.width = w
|
||||
|
||||
slef.$nextTick(function() {
|
||||
let canvas = null
|
||||
if(!canvas) {
|
||||
canvas = uni.createCanvasContext(canvasId, slef)
|
||||
}
|
||||
canvas.drawImage(res.path, 0, 0, w, h)
|
||||
canvas.draw()
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
destWidth: w,
|
||||
destHeight: h,
|
||||
fileType: type,
|
||||
quality: quality,
|
||||
success: file => {
|
||||
if(isBase64) {
|
||||
urlTobase64(file.tempFilePath, type)
|
||||
.then(res => {
|
||||
canvas = null
|
||||
resolve(res)
|
||||
})
|
||||
.catch(e => {
|
||||
reject({
|
||||
code: -4,
|
||||
msg: '图片转base64错误',
|
||||
data: e
|
||||
})
|
||||
})
|
||||
} else {
|
||||
resolve(file.tempFilePath)
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
reject({
|
||||
code: -3,
|
||||
msg: 'canvas转图片错误',
|
||||
data: e
|
||||
})
|
||||
}
|
||||
}, slef)
|
||||
}, 500)
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default compress
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<view class="compress__canvas">
|
||||
<!-- #ifndef H5 -->
|
||||
<canvas canvas-id="compress_canvas" :style="{width: width + 'px', height: height + 'px'}"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 使用方法
|
||||
* import WCompress from '@/components/w-compress/compress.js'
|
||||
* components: { WCompress }
|
||||
* <w-compress ref='wCompress' />
|
||||
* this.$refs.wCompress.start(res.tempFilePaths[0]).then().catch()
|
||||
* this.$refs.wCompress.start(res.tempFilePaths).then().catch()
|
||||
*/
|
||||
import compress from './compress.js'
|
||||
export default {
|
||||
name: 'wCompress',
|
||||
data() {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start(imgUrl, options={}) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if(imgUrl instanceof Array) {
|
||||
try{
|
||||
let arr = []
|
||||
for(let i=0; i<imgUrl.length; i++) {
|
||||
let url = await compress(imgUrl[i], this, options)
|
||||
arr.push(url)
|
||||
}
|
||||
|
||||
resolve(arr)
|
||||
}catch(e){
|
||||
reject(e)
|
||||
}
|
||||
|
||||
/* let arr = []
|
||||
arr = imgUrl.map(async c => {
|
||||
return await compress(c, this, options)
|
||||
})
|
||||
resolve(arr) */
|
||||
|
||||
/* let arr = imgUrl.map(c => {
|
||||
return compress(c, this, options)
|
||||
})
|
||||
|
||||
Promise.all(arr)
|
||||
.then(resolve)
|
||||
.catch(reject) */
|
||||
} else {
|
||||
compress(imgUrl, this, options)
|
||||
.then(resolve)
|
||||
.catch(reject)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.compress__canvas {
|
||||
position: absolute;
|
||||
left: 10000px;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -17,14 +17,6 @@
|
||||
<u-icon slot="right-icon" shape="square" size="18" randomBgColor name="arrow-right"></u-icon>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-list-item>
|
||||
<u-cell :title="`同步微信昵称头像`" @click="syncWeChatInfo()">
|
||||
<u-icon slot="icon" shape="square" size="18" randomBgColor name="reload"></u-icon>
|
||||
<u-icon slot="right-icon" shape="square" size="18" randomBgColor name="arrow-right"></u-icon>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
|
||||
<u-list-item>
|
||||
<u-cell title="修改密码" @click="navigateToHandle('/pages/member/setting/userInfo/password')">
|
||||
@@ -82,44 +74,6 @@
|
||||
navigateToHandle(pageUrl) {
|
||||
this.$u.route(pageUrl)
|
||||
},
|
||||
//同步微信昵称数据
|
||||
syncWeChatInfo() {
|
||||
let _this = this
|
||||
wx.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: e => {
|
||||
console.log(e)
|
||||
if (e.errMsg == 'getUserProfile:ok') {
|
||||
//var data = {
|
||||
// avatarUrl: e.avatarUrl,
|
||||
// city: e.city,
|
||||
// country: e.country,
|
||||
// gender: e.gender,
|
||||
// language: e.language,
|
||||
// nickName: e.nickName,
|
||||
// province: e.province
|
||||
//}
|
||||
_this.$u.api.syncWeChatInfo(e.userInfo).then(res => {
|
||||
console.log(res);
|
||||
if (res.status) {
|
||||
_this.$refs.uToast.show({ message: '同步成功', type: 'success', });
|
||||
if (res.data) {
|
||||
_this.$store.commit('userInfo', res.data);
|
||||
}
|
||||
} else {
|
||||
_this.$u.toast('登录失败,请重试')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
//拒绝授权
|
||||
this.$refs.uToast.show({ message: '您拒绝了请求', type: 'error' })
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 清除缓存
|
||||
clearCache() {
|
||||
// 重新获取统一配置信息
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
<u--form :model="model" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
|
||||
<u-form-item label="头像:" borderBottom>
|
||||
<u-avatar :src="model.avatar" @click="uploadAvatar" size="60" shape="square"></u-avatar>
|
||||
<u-button slot="right" type="success" size="mini" @click="uploadAvatar">选择图片</u-button>
|
||||
</u-form-item>
|
||||
<u-form-item label="昵称:" prop="nickname" borderBottom>
|
||||
<u--input border="none" v-model="model.nickname" />
|
||||
@@ -42,11 +43,18 @@
|
||||
<u-button type="error" size="normal" @click="submitHandler()" :disabled='submitStatus' :loading='submitStatus'>保存</u-button>
|
||||
</view>
|
||||
<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
|
||||
|
||||
<w-compress ref='wCompress' />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WCompress from '@/components/w-compress/w-compress.vue'
|
||||
export default {
|
||||
components: {
|
||||
WCompress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {
|
||||
@@ -155,31 +163,54 @@
|
||||
// 用户上传头像
|
||||
uploadAvatar() {
|
||||
var _this = this;
|
||||
this.$upload.uploadFiles(null, res => {
|
||||
if (res.status) {
|
||||
// 上传成功的图片地址
|
||||
let avatar = res.data.src;
|
||||
// 执行头像修改
|
||||
_this.$u.api.changeAvatar({
|
||||
id: avatar
|
||||
}).then(res => {
|
||||
if (res.status) {
|
||||
_this.$refs.uToast.show({
|
||||
message: '上传成功', type: 'success', complete: function () {
|
||||
_this.model.avatar = res.data
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(res.msg)
|
||||
}
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
uni.showLoading({ title: '图片压缩中...', mask: true })
|
||||
this.$refs.wCompress.start(res.tempFilePaths[0], {
|
||||
pixels: 90000, // 最大分辨率,默认二百万
|
||||
quality: 0.6, // 压缩质量,默认0.8
|
||||
type: 'jpg', // 图片类型,默认jpg
|
||||
base64: true, // 是否返回base64,默认false,非H5有效
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(res.msg)
|
||||
.then(res => {
|
||||
let data = {
|
||||
base64: res,
|
||||
}
|
||||
_this.$u.api.uploadFilesFByBase64(data).then(resUrl => {
|
||||
if (resUrl.code == 0) {
|
||||
let avatar = resUrl.data.src;
|
||||
//执行头像修改
|
||||
_this.$u.api.changeAvatar({
|
||||
id: avatar
|
||||
}).then(resOut => {
|
||||
if (resOut.status) {
|
||||
_this.$refs.uToast.show({
|
||||
message: '上传成功', type: 'success', complete: function () {
|
||||
_this.model.avatar = resOut.data
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(resOut.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(resUrl.msg);
|
||||
}
|
||||
});
|
||||
uni.hideLoading()
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 保存资料
|
||||
submitHandler() {
|
||||
var _this = this;
|
||||
this.submitStatus = true;
|
||||
if (!!!this.model.birthday) {
|
||||
this.$refs.uToast.show({ message: '请选择出生日期', type: 'error' })
|
||||
@@ -193,8 +224,17 @@
|
||||
birthday: this.model.birthday,
|
||||
nickname: this.model.nickname
|
||||
}).then(res => {
|
||||
this.submitStatus = false;
|
||||
this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
|
||||
if (res.status) {
|
||||
this.submitStatus = false;
|
||||
this.$refs.uToast.show({
|
||||
message: res.msg, type: 'success', complete: function () {
|
||||
_this.goUserCenter();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.submitStatus = false;
|
||||
_this.$u.toast(res.msg);
|
||||
}
|
||||
});
|
||||
}).catch(errors => {
|
||||
this.$refs.uToast.show({ message: '提交的数据校验失败,请输入合法信息!', type: 'error' })
|
||||
|
||||
@@ -367,6 +367,10 @@ namespace CoreCms.Net.Web.WebApi.Controllers
|
||||
return jm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
string url = string.Empty;
|
||||
if (filesStorageOptions.StorageType == GlobalEnumVars.FilesStorageOptionsType.LocalStorage.ToString())
|
||||
{
|
||||
@@ -399,5 +403,74 @@ namespace CoreCms.Net.Web.WebApi.Controllers
|
||||
return jm;
|
||||
}
|
||||
#endregion
|
||||
|
||||
#region 裁剪Base64上传====================================================
|
||||
|
||||
/// <summary>
|
||||
/// 裁剪Base64上传
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
[Authorize]
|
||||
[HttpPost]
|
||||
public async Task<AdminUiCallBack> UploadFilesFByBase64([FromBody] FMBase64Post entity)
|
||||
{
|
||||
var jm = new AdminUiCallBack();
|
||||
|
||||
var filesStorageOptions = await _coreCmsSettingServices.GetFilesStorageOptions();
|
||||
|
||||
if (string.IsNullOrEmpty(entity.base64))
|
||||
{
|
||||
jm.msg = "请上传合法内容";
|
||||
return jm;
|
||||
}
|
||||
|
||||
//检查上传大小
|
||||
if (!CommonHelper.CheckBase64Size(entity.base64, filesStorageOptions.MaxSize))
|
||||
{
|
||||
jm.msg = "上传文件大小超过限制,最大允许上传" + filesStorageOptions.MaxSize + "M";
|
||||
return jm;
|
||||
}
|
||||
|
||||
entity.base64 = entity.base64.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "").Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", "");//将base64头部信息替换
|
||||
byte[] bytes = Convert.FromBase64String(entity.base64);
|
||||
MemoryStream memStream = new MemoryStream(bytes);
|
||||
|
||||
string url = string.Empty;
|
||||
if (filesStorageOptions.StorageType == GlobalEnumVars.FilesStorageOptionsType.LocalStorage.ToString())
|
||||
{
|
||||
url = _toolsServices.UpLoadBase64ForLocalStorage(filesStorageOptions, memStream);
|
||||
}
|
||||
else if (filesStorageOptions.StorageType == GlobalEnumVars.FilesStorageOptionsType.AliYunOSS.ToString())
|
||||
{
|
||||
//上传到阿里云
|
||||
url = await _toolsServices.UpLoadBase64ForAliYunOSS(filesStorageOptions, memStream);
|
||||
|
||||
}
|
||||
else if (filesStorageOptions.StorageType == GlobalEnumVars.FilesStorageOptionsType.QCloudOSS.ToString())
|
||||
{
|
||||
//上传到腾讯云OSS
|
||||
url = _toolsServices.UpLoadBase64ForQCloudOSS(filesStorageOptions, bytes);
|
||||
}
|
||||
else if (filesStorageOptions.StorageType == GlobalEnumVars.FilesStorageOptionsType.QiNiuKoDo.ToString())
|
||||
{
|
||||
//上传到七牛云kodo
|
||||
url = _toolsServices.UpLoadBase64ForQiNiuKoDo(filesStorageOptions, bytes);
|
||||
}
|
||||
var bl = !string.IsNullOrEmpty(url);
|
||||
jm.code = bl ? 0 : 1;
|
||||
jm.msg = bl ? "上传成功!" : "上传失败";
|
||||
jm.data = new
|
||||
{
|
||||
fileUrl = url,
|
||||
src = url
|
||||
};
|
||||
|
||||
return jm;
|
||||
}
|
||||
|
||||
#endregion
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user