VUE上传头像，从相册选择、调用摄像头，ios适用transPath的转换

最新推荐文章于 2024-09-19 16:38:09 发布

jmymy0

最新推荐文章于 2024-09-19 16:38:09 发布

阅读量8.2k

点赞数

本文链接：https://blog.csdn.net/jmymy0/article/details/81201814

版权

这篇博客介绍了如何在Vue项目中实现上传头像的功能，包括从相册选择图片和调用摄像头拍摄。特别讨论了在iOS设备上使用transPath进行图片转换的问题，提供了完整的HTML、CSS和Vue方法代码示例。

摘要由CSDN通过智能技术生成

HTML

<div class="picture">
       <div class="upload">

//这个图片是田字格，样式
<img @click="bb" v-show="add" src="../../images/jia.png" />

//这是要上传的图片
<img v-show="del" :src=tu />

//删除的图片
<img @click="deletes" src="../../images/del.png" />

// 这个点击保存，是手机上选择好相片才会出来的
<div id="confrim" v-show="btn" @click="bao">点击保存</div>
</div>
</div>

样式：

#confrim{
width: 100%;
height: 0.52rem;
position: fixed;
bottom:0;
left: 0;
text-align: center;
font-size: 0.14rem;
z-index: 200;
background: #3ABA63;
line-height: 0.5rem;
}

DATA里

tu:'',

btn:false,

add:true,
del:false,

mthods里

deletes:function(){
this.tu=""
this.del=false
this.add=true
},

//上传头像
bb:function () {
// 点击弹出选择框
api.actionSheet({
cancelTitle : '取消',
buttons : ['拍照', '手机相册']
}, function(ret, err) {
if (ret) {
// 调用拍照功能
getPicture(ret.buttonIndex);
}
});

let that=this;
let thathttp=this.$http

//相机拍照
function getPicture(sourceType) {
// 1为相机拍照，2为从相册选择
if (sourceType == 1) {
api.getPicture({
sourceType : 'camera',
encodingType : 'jpg',
mediaValue : 'pic',
allowEdit : false,
quality : 96,
s