跨过后台,前端直接上传文件到oss存储

284 阅读1分钟

文件是直接通过前端上传到oss存储,文件路径和文件名在前端有一个按年月日生成规则。这个规则算法的后缀取的是mimetype。用的是element UI 

vue代码:

``
<script>import { uploadOSS } from '@/api/oss'export default {  name: 'ComUpload',  props: {    isFile: {      type: Boolean,      default: () => {        return false      }    }  },  data() {    return {      imageUrl: '',      fileList: [        // {name:'', url: ''}      ]    }  },  methods: {    //  上传图片    upload(file) {      console.log('file', file);      uploadOSS(file).then(res => {        console.log('resresresres', res)        // this.imageUrl = res.res.url        // this.fileList[0].name = file.file.name        // this.fileList[0].url = res.url        this.$emit('uploadSuccess', res.res.requestUrls[0])      }).catch(err => {        console.log('err--', err)      })    },    beforeAvatarUpload(file) {      if (this.isFile) {        // const isWord = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'].includes(file.type)        const isWord = ['application/vnd.openxmlformats-officedocument.wordprocessingml.document',].includes(file.type)        const isLt2M = file.size / 1024 / 1024 < 20        if (!isWord) {          this.$message.error('上传文件只能是 word和pdf 格式!')        }        if (!isLt2M) {          this.$message.error('上传文件大小不能超过 2MB!')        }        return isWord && isLt2M      } else {        const isJPG = ['image/jpeg', 'image/png'].includes(file.type)        const isLt2M = file.size / 1024 / 1024 < 20        if (!isJPG) {          this.$message.error('上传头像图片只能是 JPG 格式!')        }        if (!isLt2M) {          this.$message.error('上传头像图片大小不能超过 2MB!')        }        return isJPG && isLt2M      }    }  }}</script>

js部分

import {  ossConfig} from '../../ossConfig' // ossConfig.jsimport OSS from 'ali-oss'import request from '@/utils/request'/** * 获取上传token */const ossToken = () => {  // eslint-disable-next-line no-undef  return request({    url: '/user/oss/token',    method: 'get'  })}/** * 生成文件目录 */const timeString = () => {  const myDate = new Date()  return `${myDate.getFullYear()}/${myDate.getMonth() + 1}/${myDate.getDate()}/${myDate.getHours()}/${myDate.getMinutes()}/${myDate.getSeconds()}`}/** * 生成30位的随机算子 */const uuid = () => {  return (    Math.random()    .toString(36)    .substring(2, 15) +    Math.random()    .toString(36)    .substring(2, 15)  )}const OSSCONFIG = {  accessKeyId: '', // 填入你的accessKeyId  accessKeySecret: '', // 填入你的accessKeySecret  bucket: ossConfig.bucket, // 填入你的bucket名  stsToken: '',  endpoint: ossConfig.endpoint}const uploadOSS = (file) => {  return new Promise(async (reslove, reject) => {    await ossToken()      .then(res => {        let suffix        OSSCONFIG.accessKeyId = res.accessKeyId        OSSCONFIG.accessKeySecret = res.accessKeySecret        OSSCONFIG.stsToken = res.securityToken        const client = new OSS(OSSCONFIG)        const Name = file.file.name // 获取blob流的类型(blob有type值) 获取文件的类型(file有name)        const suffixPre = `.${Name.substring(Name.indexOf('.') + 1)}` // 文件后缀        // eslint-disable-next-line prefer-const        suffix = suffixPre        const currTimeString = timeString() //  "年/月/日/时/分/秒"        const UUID = uuid() // 随机算子        const filename = currTimeString + UUID + suffix        client.put(filename, file.file).then(success => {          console.log('上传成功:', success)          reslove(success)        }).catch(failed => {          console.log('上传失败:', failed)          reject(failed)        })      })      .catch(err => {        reject(err)      })  })}export {  uploadOSS}