uni-app 图片上传 放大预览图片 单张 多张

476 阅读1分钟

上传图片

imgsSort(){
	uni.showLoading({//上传图片加载动效
		title:'上传中..',
	})
	uni.chooseImage({
		count: 1,//上传图片数量
		sourceType: ['album', 'camera'],//选取相机和手机本地文件夹《图片》
		success: res => {
			var count = 1;
			this.text_imgs = res.tempFilePaths[0]//当前图片本地地址
			uni.uploadFile({
			url: this.upUrl + 'seller/uploads', //仅为示例,根据自己接口变化而变化,请求接口
			filePath: res.tempFilePaths[i],
			name: 'imgFile',//后台接收字段名
			header: {xmkctoken: uni.getStorageSync('token')},//携带登录用户信息,
			success: (uploadFileRes) => {
				if (uploadFileRes.statusCode == 200) {//成功返回200
					uni.hideLoading()//上传成功停止动效
					var datads = uploadFileRes.data
					var dtass = JSON.parse(datads)//由于后台返回数据不是json对象转为json对象
					this.urlimg = dtass.data.filepath//拿到后台返回路径赋值
				}	
			},
		})
	 }
 })
},

预览图片

//单张图片
previewImg(logourl) {     //logourl图片地址、、路径
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = logourl
      uni.previewImage({
          current: 0,
          urls: imgsArray
      });
  },

预览多张

previewImg(imglist,index) {
	let imgsArray = [];
	for (let i = 0; i < imglist.length; i++) {
		imgsArray.push(imglist[i].fileUrl);
	}
	uni.previewImage({
		current: index,
		urls: imgsArray,
		indicator: 'number',
		loop: true
	});
},

预览图片多张

//this.imgUrlList图片数组//列表
previewImg(index) {
    let _this = this;
    let imgsArray = [];
    for (let i = 0; i < this.imgUrlList.length; i++) {
        if (this.imgUrlList[i].videoUrl == "") {
            imgsArray.push(this.imgUrlList[i].imgUrl);
        }
    }
    uni.previewImage({
        current: index - 1,
        urls: imgsArray,
        indicator: 'number',
        loop: true
    });
    uni.previewImage({
        current: index - 1,
        urls: imgsArray,
        indicator: 'number',
        loop: true
    });
},