uniapp 上传图片 php后台接值,上传标题加图片
uni上传图片功能
·
我用的是 uni.uploadFile 方法,前端负责上传图片,后端接收图片后进行压缩保存。(H5,安卓能正常使用)
这是页面样式,可直接粘贴使用
<view class="uploading_img">
// 前端没显示图片的样式
<view class="uploading_body" v-if="imglist.length == 0" @click="uploadingClick">
<view class="uploading_body_one">+</view>
<view class="uploading_body_two">
注:支持 ['png','jpg','jpeg','gif','bmp','ai','psd','cdr']
格式文件,每张图片不超过10m,
</view>
</view>
// 前端图片显示的样式
<view v-for="(item, index) in imglist" :key="index" v-else>
<view class="img_box_show">
<image class="img" :src="item" mode="aspectFill"></image>
<view class="img-delete" @click="imgDelete1" :data-delindex="index">x</view>
</view>
</view>
</view>
.uploading_img {
margin: 20px auto;
width: 90%;
height: 220px;
background: #ffffff;
box-shadow: 0px 0px 4px 0px rgba(17, 17, 17, 0.37);
border-radius: 6px 6px 6px 6px;
.uploading_header {
width: 100%;
height: 30px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(17, 17, 17, 0.3);
.uploading_header_one {
font-size: 16px;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #111111;
margin-left: 10px;
}
.uploading_header_two {
margin-left: 10px;
font-size: 10px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
}
}
.uploading_body {
width: 100%;
height: 189px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.uploading_body_one {
width: 35px;
height: 35px;
background: #73bb2b;
color: #ffffff;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.uploading_body_two {
width: 85%;
top: 63%;
margin: 0 auto;
position: absolute;
font-size: 10px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(17, 17, 17, 0.46);
}
}
.img_box_show {
width: 50%;
height: 50%;
margin: 40px auto;
image {
width: 100%;
height: 100%;
}
}
}
点击选择图片
uploadingClick(){
let that = this;
uni.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success(res) {
that.imglist = res.tempFilePaths;
}
});
}
点击上传
这个要看具体的业务要求了,如果需求是要上传图片加一些标题,那么就要在上传之前要先进行一步判断,如果只是单张上传的话就不用了。这里的话就不进行判断了
confirmClick(){
let url = '这里是接口地址';
let token = uni.getStorageSync('token');
uni.uploadFile({
url: url, //仅为示例,非真实的接口地址
filePath: this.imglist[0],
header: {
authorization: 'Bearer ' + token
},
// 这个name是上传时后端要求图片的字段,如果后端要求要传数组类型的记得要加[0]
name: 'works[0]',
// 这个formData是这个图片的一些标题,也就是一些其他必传字段
formData: {
title: this.form.uploading_message,
high: this.form.uploading_high,
wide: this.form.uploading_wide,
label: this.form.uploading_label,
type_id: this.form.typeNId,
color_mode_id: this.form.colorId,
file_format_id: this.form.exId
},
success: uploadFileRes => {
var res1 = JSON.parse(uploadFileRes.data);
if (res1.code == 1) {
this.form = {};
this.imglist = [];
uni.showToast({
title: '上传成功',
duration: 1000,
icon: 'none'
});
// 这些是因为ui设计的页面需要跳转去选择一些内容
// 所以我把一些字段都存储到本地,上传成功后清除
let form = uni.getStorageSync('form');
form.colorName = '';
form.exName = '';
form.uploading_high = '';
form.typeName = '';
form.uploading_label = '';
form.uploading_message = '';
form.uploading_wide = '';
uni.setStorageSync('form', form);
} else {
uni.showToast({
title: res1.msg,
duration: 1000,
icon: 'none'
});
}
}
});
}
这些代码可以直接粘贴复用的,只要改一些参数就可以的。如果大家能用的上请评论扣 1 !!!
更多推荐
已为社区贡献4条内容
所有评论(0)