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