mrr.sj.front/components/upload-img/upload-img.vue

<template>
	<view class="upload-content" :style="'width:'+width">
	  <view 
	    v-for="(item, index) in photo" 
	    :key="index"
	    class="image-preview"
	  >
	    <image 
	      :src="item"
	      mode="aspectFill"
	      class="preview-image"
		  @click="previewImage(photo,index)"
	    ></image>
	    <view class="delete-btn" @click="deleteImage(index)">×</view>
	  </view>
	  <view 
	    v-if="photo.length < maxNum"
	    class="upload-btn"
	    @click="chooseImage"
	  >
	    <text class="plus-icon">+</text>
	  </view>
	</view>
</template>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script>
import request from '../../utils/request';
	export default {
		name:"upload-img",
		props: {
			photo: {
				type: Array,
				default: []
			},
			maxNum: {
				type: Number,
				default: 1
			},
			width: {
				type: String,
				default: ''
			}
			
		},
		data() {
			return {
				imagesList: []
			};
		},
		methods: {
			chooseImage() {
			  let that = this;
			  uni.chooseImage({
			    count: that.maxNum - that.photo.length,
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: (res) => {
			        // 处理文件大小限制
					const validFiles = res.tempFiles.filter(file => {
						const isValidSize = file.size < 10 * 1024 * 1024 // 10MB限制
						if (!isValidSize) {
						  uni.showToast({
							title: '图片大小不能超过10MB',
							icon: 'none'
						  })
						}
						return isValidSize
					})
			      
					// 添加到媒体列表
					const newImages = validFiles.map(file => ({
						type: 'image',
						url: file.path,
						size: file.size
					}))
					console.log('newImages',newImages)
					that.imagesList = newImages;
			  		that.uploadPhoto();
			    },
			  		
			  })
			},
			// 上传图片接口
			async uploadPhoto() {
				let that = this;
				// 刷新token
				const newToken = await request.post('/user/refreshtoken',{refresh_token: uni.getStorageSync('refreshToken'),deviceid: getApp().globalData.deviceid})
				// 2. 保存到本地
				uni.setStorageSync('accessToken',newToken.access_token)
				uni.setStorageSync('refreshToken',newToken.refresh_token)
				
				const promises = that.imagesList.map(item => {
					return new Promise((resolve, reject) => {
					  request.uploadImage('/user/uploadphoto',item.url,{type: item.type}).then(res=>{
						  console.log('res==========',res)
						resolve(res)
					  }).catch(err=>{
						reject(err)
					  })
					 
					 
					//  const client = new OSS({
					// 	 // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
					// 	 region: "oss-cn-changzhou",
					// 	 authorizationV4: true,
					// 	 // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
					// 	 accessKeyId: "LTAI5tGsiEK2Zuat4bJSHXs9",
					// 	 accessKeySecret: "x9ToLlfdcgg2sGnyfVpQWGVLfEdG3E",
					// 	 // 从STS服务获取的安全令牌（SecurityToken）。
					// 	 stsToken: "yourSecurityToken",
					// 	 // 填写Bucket名称。
					// 	 bucket: "mrrplus",
					//    });
				 
					//    // 从输入框获取file对象，例如<input type="file" id="file" />。
					//    let data;
					//    // 创建并填写Blob数据。
					//    //const data = new Blob(['Hello OSS']);
					//    // 创建并填写OSS Buffer内容。
					//    //const data = new OSS.Buffer(['Hello OSS']);
				 
					//    const upload = document.getElementById("upload");
				 
					//    async function putObject(data) {
					// 	 try {
					// 	   // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
					// 	   // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
					// 	   // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
					// 	   const options = {
					// 		 meta: { temp: "demo" },
					// 		 mime: "json",
					// 		 headers: { "Content-Type": "text/plain" },
					// 	   };
					// 	   const result = await client.put("examplefile.txt", data, options);
					// 	   console.log(result);
					// 	 } catch (e) {
					// 	   console.log(e);
					// 	 }
					//    }
				 
					//    upload.addEventListener("click", () => {
					// 	 const data = file.files[0];
					// 	 putObject(data);
					//    });
					})
				})
			  
			    Promise.all(promises)
			    .then(result => {
				  var arr = [];
				  result.forEach((element,i)=>{
					arr[i] = element.path;
				  })
				  // that.photo = that.photo.concat(arr);
				  that.$emit('addImg',arr)
				  
			      uni.showToast({
			        title: '上传成功'
			      })
				  
			    })
			    .catch(err => {
				  console.log('上传结果err',err)
			      uni.showToast({
			        title: '上传失败',
			        icon: 'none'
			      })
			    })
			},
			// 删除图片
			deleteImage(index) {
			  this.$emit('deleteImage',index)
			},
			previewImage(urls, current) {
			  uni.previewImage({
				urls: urls,
				current: current
			  })
			},
		}
	}
</script>

<style scoped>
.upload-content {
  /* width: 750rpx; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  margin-top: 20rpx;
  position: relative;
}
.image-preview,
.upload-btn {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.preview-video,
.preview-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-right: 18rpx;
}

.upload-btn {
  border: 2rpx dashed #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plus-icon {
  font-size: 60rpx;
  color: #999999;
}

.delete-btn {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
}

</style>