阿里云OSS图片直传
简介：
开发过程中，多多少少会用到图片上传、文件上传等，大多数都会选择第三方云服务提供的相关功能，比如阿里云、腾讯云、七牛云等等云服务提供商提供的文件存储运营商提供的服务。本次介绍使用的主要是阿里云的OSS文件直传，阿里云存储文件方式有多种，目前主要就工作中用到的阿里云oss文件直传做案例做笔记，以便于帮助有类似需求的同行及自己学习。
注意事项：
1、文件分类：主要是方便日后文件的管理，同时也便于查找。
2、文件重命名：上传文件有时候会出现重名等问题，有时候会给使用者造成一定的影响，不利用用户区分文件是否上传；统一规则对文件进行命名，目的是为了方便日后文件管理维护等。
3、文件大小限制：限制上传文件的大小，主要是减少上传完文件等待的时间，以及带宽的消耗，同时也可以减少云存储的存储空间的占用。
4、文件存储归类：依据文件的类型、格式、时间等进行文件的归类，目的在于文件规划合理，存储有序，便于后期的管理和维护。
代码实例：
- OSS配置
/**
* [OSS配置]
* @type {Object}
*/
const conf = {
accessKeyId: "accessKeyId",// OSS上传需要的Id
accessKeySecret: "accessKeySecret",// OSS上传需要的Secret
ali: "https://xxxxx.oss-cn-beijing.aliyuncs.com",// 阿里云OSS存储对象地址
bucket: "xxxxx" // 类型
};
- 文件重命名（文件分类）
/**
* [文件重命名]
* @param {String} suffixName [文件后缀名]
* @return {String} [文件相对路径名]
*/
const fileRename = suffixName => {
// 处理时间戳
const moment = new Date();
let yyyy = moment.getFullYear(),
MM = moment.getMonth() + 1,
dd = moment.getDate(),
hh = moment.getHours(),
mm = moment.getMinutes(),
ss = moment.getSeconds();
// 补“0”
MM = MM <= 9 ? "0" + MM : MM;
dd = dd <= 9 ? "0" + dd : dd;
// 5位数字的随机数
let rm = (Math.random() * 1e5).toFixed(),
path = `${yyyy}${MM}/${dd}_${hh}${mm}${ss}_${rm}`;
return path + suffixName;
};
// 格式：yyyyMM/dd_hhmmss_rm.fileType
- 上传图片函数（uploadImg）
/**
* [上传图片]
* @param {Object} file [上传文件实例]
* @param {String} filePath [上传文件相对路径]
* @return {String} [上传图片生成的路径地址]
*/
const uploadImg = async (file, filePath) => {
let path = filePath.toLowerCase(),
dotIndex = path.lastIndexOf("."),
fileType = path.substring(dotIndex);
const typeString = ".jpg.jpeg.png";
// 限制类型
if (!typeString.includes(fileType)) {
Message.error("上传图片类型有误，请重新上传！");
return null;
}
// 限制大小
if (file.size >= 1024 * 1024) {
this.$message.error("上传的图片大小不能超过 1M，请重新上传！");
return null;
}
// 文件后缀名
let suffixName = fileRename(fileType);
// FormData
const form = new FormData();
form.append("key", "picture/" + suffixName);
form.append("file", file);
form.append("accessKeyId", conf.accessKeyId);
form.append("success_action_status", 200);
try {
const res = await axios.post(conf.ali, form);
if (res.status == 200) {
Message.success("上传成功");
return conf.ali + "/picture/" + suffixName;
} else {
Message.error("上传失败：" + res.status);
return null;
}
} catch (error) {
console.log(error);
Message.error("图片上传失败");
return null;
}
};
- 实例绑定vue
import Vue from "vue";
import App from "./App.vue";
// 文件上传
import uploadImg from "./assets/js/uploadImg";
Object.defineProperties(Vue.prototype, {
$oss: { value: uploadImg }
});
new Vue({
render: h => h(App)
}).$mount("#app");
实例使用：
<template>
<el-form :model="user" ref="userForm" :rules="rules" size="small" label-width="80px" class="dialog-form">
<el-form-item label="上传图片">
<el-row>
<el-col :span="8">
<el-button type="primary" icon="el-icon-upload" class="uploadBtn" :loading="loading">
上传图片
<input type="file" accept=".jpg, .jpeg, .png" @change="uploadImg" />
</el-button>
<p class="up-tip">
注：若输入用户头像链接地址同时又上传图片，则上传的图片优先级高于输入的链接地址（建议尺寸200*200）
</p>
</el-col>
<!-- 展示图片 -->
<el-col :span="15" :offset="1">
<el-image :src="avatar" draggable="false" style="144px;height:144px;">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</el-col>
</el-row>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "UploadImg",
data() {
return {
loading: false,
avatar: ""
};
},
methods: {
// 上传图片
uploadImg(e) {
// 加载指示器
this.loading = true;
// file实例
let file = e.target.files[0];
// file相对路径
let filePath = e.target.value;
// 文件上传
this.$oss(file, filePath).then(url => {
this.loading = false;
!!url && (this.avatar = url);
});
}
}
};
</script>
注：图片上传主要按钮 <input type="file" accept=".jpg, .jpeg, .png" @change="uploadImg" /> ，其中 accept 作用主要是过滤指定类型文件，默认为空（即不做任何限制）。