oss问题

思路：通过后端人员给的接口获取oss配置信息，上传文件或图片连同这些获取到的oss信息 上传到oss服务器。 

有几个注意的地方，上传成功时 不会有返回信息。 成功时的默认是204，后端可以设置为200。

选中图片就默认上传  :auto-upload = "true"

<el-form-item label="员工头像" prop="avatar">
						<el-upload
							class="avatar-uploader"
							ref="upload"
							name="file"
							:action="ossConfig.host"
							:data="ossConfig"
							:accept="'image/*'"
							:auto-upload="true"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
							:on-change="handleAvatarChange"
							:multiple="false"
						>
							<img v-if="avatarUrl" :src="avatarUrl" class="avatar"/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

在打开页面时就获取下oss信息

getOssConfig() { //获取oss配置
				let that = this;
				let ossExpireTime = parseInt(this.$localStorage.get("ossExpireTime")); //读取是否有oss过期时间

				if (ossExpireTime && (new Date() < new Date(ossExpireTime))) {
					let ossConfig = JSON.parse(this.$localStorage.get("ossConfig"));
					// 数据
					that.ossConfig.host = ossConfig.host;
					that.ossConfig.OSSAccessKeyId = ossConfig.accessid;
					that.ossConfig.policy = ossConfig.policy;
					that.ossConfig.Signature = ossConfig.signature;
					that.ossConfig.keyDir = ossConfig.dir;
				} else {
					this.$ajax({
						url: this.$ajax.apiUrl(`/sys/file/oss-sign`),
						method: "get",
						params: this.$ajax.adornParams({fileType: 0}, false)
					}).then(res => {
						if (res && res.code === 10000) {
							console.log('OSS信息', res)
							let ossConfig = JSON.parse(res.data);
							// 存入缓存
							this.$localStorage.set("ossConfig", res.data);
							this.$localStorage.set("ossExpireTime", ossConfig.expire);


							// 数据
							that.ossConfig.host = ossConfig.host;
							that.ossConfig.OSSAccessKeyId = ossConfig.accessid;
							that.ossConfig.policy = ossConfig.policy;
							that.ossConfig.Signature = ossConfig.signature;
							that.ossConfig.keyDir = ossConfig.dir;
						}
					});
				}
			},

 

图片上传前获取下oss的key和FileName

handleAvatarSuccess(res, file) {//图片上传成功
				this.avatarUrl = URL.createObjectURL(file.raw);
},
			beforeAvatarUpload(file) {//图片上传前
				console.log('beforeUpload', file);
				this.ossConfig.Filename = this.$tool.getUUID() + "." + file.type.split('/')[1];
				this.ossConfig.key = this.ossConfig.keyDir + '/' + this.ossConfig.Filename;
				console.log('ossConfig!!!', this.ossConfig);

				const isLt2M = file.size / 1024 / 1024 < 2;
				let isJPG = /.(gif|jpg|jpeg|png|GIF|JPG|PNG|JPEG)$/.test(file.name);

				if (!isJPG) {
					this.$message.warning("只能上传图片类型的文件");
				}
				if (!isLt2M) {
					this.$message.error("上传图片大小不能超过 2MB!");
				}
				return isJPG && isLt2M;
			},
			handleAvatarChange(file, fileList) {  //图片改变
				console.log('imgObj', file);

				const isLt2M = file.size / 1024 / 1024 < 2;
				let isJPG = /.(gif|jpg|jpeg|png|GIF|JPG|PNG|JPEG)$/.test(file.name);

				if (isJPG && isLt2M) {
					this.avatarUrl = window.URL.createObjectURL(file.raw);
				}
			},

 

转载于:https://my.oschina.net/u/560237/blog/3095070