小程序图片上传
Taro框架
template
<view class="top_img flex">
<view class="text">
上传人像图片
</view>
<view
@tap="chooseImages"
>
<image
class="images"
:src="img1 != '' ? img1 : img"
alt=""
/>
</view>
</view>
script
data() {
return {
//没图片时候默认显示这一个添加标识
img: require("../../static/image/card/sbbb@2x.png"),
img1: "",
};
},
methods: {
chooseImages() {
const that = this;
Taro.chooseImage({
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
console.log(res);
let file = res.tempFilePaths[0];
that.files = res.tempFilePaths[0];
console.log(file);
Taro.getImageInfo({
src: file,
success(imageInfo) {
var imgType = imageInfo.type;
console.log(imageInfo);
Taro.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径
encoding: "base64", //这个是很重要的
success: (res) => {
//成功的回调
//返回base64格式
var base64Str =
"data:image/" + imgType + ";base64," + res.data;
that.img1 = base64Str;
var img = res.data;
console.log(img);
// 需要上传到后端接口
that.uploadImgs(img);
},
fail: (err) => {
console.log(err);
reject(err);
},
});
},
});
},
});
},
uploadImgs(img) {
接口名称({
// 接口入参
userId: this.user.userId,
image: img,
}).then((res) => {
console.log(res);
});
},
},
css
.top_img {
padding: 20px;
margin-top: 140px;
.text {
width: 150px;
margin-right: 50px;
}
}```