直播电商平台开发,发布多图片上传到服务器并实现图片预览功能

发布时间 2023-04-27 14:14:35作者: 云豹科技-苏凌霄

直播电商平台开发,发布多图片上传到服务器并实现图片预览功能

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]);
}
},

 以上就是直播电商平台开发,发布多图片上传到服务器并实现图片预览功能, 更多内容欢迎关注之后的文章