let OSS = require('ali-oss'); let config = { region: 'oss-cn-hangzhou', //你的Region 注意 这个只要 空间名 不要 http:// 和 .aliyunoss.com !! //secure: true, accessKeyId: XXXX,//你的accessKeyId accessKeySecret: XXXX,//你的accessKeySecret bucket: 'ipb' }; /** * 配置 */ let init = () => { return new OSS(config); } /** * 生成uuid */ let guid = () => { let S4 = () => { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); } /** * 修改文件名字 */ let fileName = (file,key) => { let arr = file.name.split("."); var uuid = guid(); if (arr.length > 1) { return key + uuid + '.' + arr[arr.length - 1]; } else { return uuid; } } /** * 上传文件 */ apis.getOssToken({ roleSessionName: 123 }) .then(res => { console.log(res) }) let ossPut = (file,key) => { return new Promise((resolve, reject) => { let objectName = fileName(file,key); init().put(objectName, file).then(({ res, url }) => { if (res && res.status == 200) { console.log('阿里云OSS上传文件成功回调', res, url, objectName); let data = { res: res, url: url, objectName: objectName }; resolve(data); } }).catch((err) => { console.log('阿里云OSS上传文件失败回调', err); reject(err) }); }) } /** * 下载文件 */ let ossGet = (name) => { return new Promise((resolve, reject) => { let signUrl = init().signatureUrl(name, {expires: 300}); resolve(signUrl); }) } let ossDel = (name) => { return new Promise((resolve, reject) => { init().delete(name).then((res) => { if (res && res.status == 200) { console.log('阿里云OSS删除文件成功回调', res); resolve(res); } }).catch((err) => { console.log('阿里云OSS删除文件失败回调', err); reject(err) }); }) } export default { ossPut, ossGet, ossDel }
调用
<el-form-item label="头像" class="user"> <el-input type="hidden"></el-input> <el-upload class="iptImg" ref="uploadAvatar" action list-type="picture-card" :http-request="uploadImg" :before-upload="beforeUploadImg" :on-remove="removeFileForm" :on-exceed="exceedFileForm"> <img v-if="addForm.url" :src="addForm.url" class="avatarDis" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <script> export default { data() { return { addForm: { avatar: "", url:"", } } }, methods: { //图片类型验证 beforeUploadImg(file) { const isJPG = file.type === "image/jpg"; const isJPEG = file.type === "image/jpeg"; const isPNG = file.type === "image/png"; const isGIF = file.type === "image/gif"; const isBMP = file.type === "image/bmp"; if (!isJPG && !isJPEG && !isPNG && !isGIF && !isBMP) { this.$message.error("只能上传图片格式为jpg,jpeg,png,gif,bmp!"); } return isJPG || isJPEG || isPNG || isGIF || isBMP; }, //点击图片上传 uploadImg(file) { // this.addForm.file.push(file.file); // console.log(this.addForm.file); if(this.addForm.avatar != "" && this.addForm.avatar != null){ this.removeFileForm(file); } this.$ossClient .ossPut(file.file, "PartyMember/") .then(res => { this.addForm.avatar = res.objectName; }) .catch(e => { console.log(e); }); }, //移除文件 removeFileForm(file) { // this.addForm.file.splice(this.addForm.file.indexOf(file.raw), 1); // console.log(this.addForm.file); this.$ossClient .ossDel(this.addForm.avatar) .then(res => { this.addForm.avatar = ""; }) .catch(e => { console.log(e); }); }, //超出数量限制 exceedFileForm() { this.$message.error("最多上传1个头像"); }, //数据回显 getPartyInfo() { this.partyId = this.$route.query.partyId; axios({ method: "get", //请求方式 url: "/api/commonPartyMember/getPartyMember", //请求地址 params: { id: this.partyId } }) .then(res => { this.addForm.avatar = res.data.data.avatar; if (this.addForm.avatar != "" && this.addForm.avatar != null) { this.$ossClient .ossGet(this.addForm.avatar) .then(res => { this.addForm.url = res; }) .catch(e => { console.log(e); }); } }) .catch(err => { console.log(err); }); }, }, } </script>