直播电商平台开发,发布多图片上传到服务器并实现图片预览功能
直播电商平台开发,发布多图片上传到服务器并实现图片预览功能
vue页面
<view class="container1" >
<image src="../../static/errorImage.jpg" mode="scaleToFill" @click="upload"></image>
<image v-for="item in imglist" :src="item" mode="scaleToFill"></image>
</view>
<button @click="uploadImage()">上传</button>
前端对应方法,由微信端已经封装好直接引用即可
methods:{
uploadImage(){
uni.uploadFile({
url: 'http://120.xxxxxx/upImgs',
method: 'POST',
filePath: this.imglist[0],
name: 'file',
success: (uploadFileRes) => {
console.log(uploadFileRes)
}
});
},
upload(){
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res)=> {
const images = res.tempFilePaths;
this.savetemp(images);
}
});
},
savetemp(img){
for (var i = 0; i < img.length; i++) {
this.imglist.push(img[i]);
}
},
以上就是直播电商平台开发,发布多图片上传到服务器并实现图片预览功能, 更多内容欢迎关注之后的文章