文件是直接通过前端上传到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}