jhlapp/components/qiniu/QiniuUpload.vue

<template>
	<div class="clearfix up-box">
		<div class="up-img-view" v-for="(item, index) in Fimages" :key="index">
			<block v-if="item">
				<image class="cata-img" :src="item" mode="aspectFill"></image>
				<text class="custom-icon custom-icon-ic_searchclosed del-icon" @click="handleRemove(item, index)"></text>
			</block>
		</div>
		<div @click="uploadAva" class="upload-btn"><text class="custom-icon custom-icon-xinzeng"></text></div>
	</div>
</template>

<script>
import webUrl from '@/common/config.js';
import qiniuUploader from './qiniuUploader.js';
export default {
	data() {
		return {
			Fimages: [],
			qn_token: ''
		};
	},
	computed: {
		enToken() {
			return this.$store.state.enToken;
		}
	},
	props: {
		images: {
			type: Array,
			default: () => {
				return [];
			}
		},
		//最多可以选择的图片张数，默认9
		count: {
			type: Number,
			default: 9
		},
		// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
		sourceType: {
			type: Array,
			default: () => {
				return ['album', 'camera'];
			}
		}
	},
	watch: {
		images(val) {
			this.Fimages = val;
		}
	},
	created() {
		this.Fimages = this.images;
		// 上来获取七牛token
		this.getQiniuToken();
	},
	methods: {
		getQiniuToken() {
			this.$u.api
				.uploadToken({
					bucket: webUrl.QINIU_KEY,
					key: 0
				})
				.then(res => {
					this.qn_token = res.data;
				});
		},
		// 移除图片 请求七牛云接口
		async handleRemove(url, index) {
			this.Fimages.splice(index, 1);
			this.$emit('handleRemove', this.Fimages);
			return;
			const urlArr = url.split('/');
			const nameSlice = urlArr[urlArr.length - 6];

			let name = '';
			if (urlArr[urlArr.length - 1] === '750') {
				name = nameSlice.slice(0, nameSlice.indexOf('?'));
			} else {
				name = urlArr[urlArr.length - 1];
			}
			let key = `${this.enToken}/${name}`;
			this.$u.api
				.UploadDel({
					bucket: webUrl.QINIU_KEY,
					key: key
				})
				.then(res => {});
		},
		// 上传头像
		uploadAva() {
			uni.chooseImage({
				count: this.count,
				sourceType: this.sourceType, //从相册选择
				success: async res => {
					res.tempFilePaths.forEach(imgPath => {
						this.upImg(imgPath);
					});
				}
			});
		},
		// 请求上传图片接口
		async upImg(imgPath) {
			// const imgPath = res.tempFilePaths[0]; //选择图片的路径
			const imgName = imgPath.split('/')[imgPath.split('/').length - 1];
			const key = `${this.enToken}/${imgName}`; //图片和企业token拼接 为自定义文件名

			let domain = webUrl.QN_UP; //文件上传地址
			let token = this.qn_token; //token为七牛云的token一般由后台接口提供
			let filePath = imgPath; //为需要上传的文件
			uni.showLoading();
			qiniuUploader.upload(
				filePath,
				res => {
					//图片上传完成后返回值
					// 压缩图片
					uni.hideLoading();
					// const imgData = {
					// 	...res,
					// 	key: res.key + '?imageView2/2/w/750/h/750'
					// };
					this.$emit('uploadSuccess', `${webUrl.QINIU_URL}/${res.key}`);
				},
				error => {
					uni.hideLoading();
					// resolve(error)
				},
				{
					region: 'SCN', // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
					domain: domain, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
					key: key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
					// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
					uptoken: token // 由其他程序生成七牛 uptoken
				},
				res => {
					uni.hideLoading();
					//上传进度
					if (res.progress === 100) {
						// resolve(keys);
					}
				}
			);
		}
	}
};
</script>

<style scoped lang="scss">
.up-box {
	display: inline-block;
	.cata-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: block;
	}
	.upload-btn {
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		background-color: #f4f5f6;
		border-radius: 8rpx;
		color: #606266;
		display: inline-block;
		vertical-align: middle;
		.custom-icon-xinzeng {
			font-size: 44rpx;
		}
	}
	.up-img-view {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		.del-icon {
			position: absolute;
			color: $uni-color-error;
			right: 0;
			top: -20upx;
			font-size: 40rpx;
			background-color: #ffffff;
			width: 40rpx;
			height: 40rpx;
			border-radius: 100%;
			line-height: 40rpx;
		}
	}
}
</style>