vue直传图片到阿里云OSS（单张直接上传）

背景：

近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。
经过摸索，也实现了。代码其实没啥难度，问题都出在阿里云这里，例如：跨域，读写权限等等，以及一个十分恶心的坑（竟然不能把目标文件夹写到配置参数里面，就很无语，百试不得，后来拼在了图片路径前面，达到了效果）

首先你得去阿里云开启一个对象存储oss服务：

略

还得去创建一个AccessKey

这两个是关键项

还得创建一个bucket，用于存放你的东西

这里面你可以创建文件夹，将图片指定到这个文件夹了，就不会杂乱的放在公共目录了，当然这个创建文件件的操作，最好是交给后端来做，在请求接口拿secretKey这些东西的时候，让后端一并返回。

读写权限打开：

改成公共读写

创建跨域规则

1，

2，

3，

4，规则如下：

---

以上已做好所有准备，可以去vue项目中编写上传相关代码了

---

安装ali-oss

npm install ali-oss

vue代码：

<template>
    <el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL"
    :multiple = true :before-upload="handleBeforeUpload" :limit="8">
      <img v-if="Addfrom.url" :src="Addfrom.url" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>             
</template>
<script>
  import {client,	getFileNameUUID} from './alioss.js'
  export default {
    data() {
      return {
        fileList: [],
        Addfrom:{
          url:''
        }
      };
    },
    methods: {
      // 上传文件之前
			handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 4mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
			uploadURL(file) {
				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
				var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
          this.Addfrom.url = 'https://xxx-oss.oss-cn-beijing.aliyuncs.com/' + fileName;
        })
			},

    }
  }
</script>

alioss.js

// var OSS = require('ali-oss');
import OSS from "ali-oss";
export function client(){
  var client = new OSS({
      endpoint: 'oss-cn-beijing.aliyuncs.com',//填写Bucket所在地域
      accessKeyId: 'LTAxxxxxxxxxxxxxxxxxxxRAQn',
      accessKeySecret: 'NxexxxxxxxxxxxxxxxxxxxxxxGG2',
      bucket: 'zyp-oss',// 填写Bucket名称。
  })  //后端提供数据 
  return client
}
/**
 * 生成随机uuid
 */
export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return `${+new Date()}_${rx()}${rx()}`
}

页面效果：

点击选择文件

上传成功回显

看看oss中

两种上传方式的区别：

见阿里：添加链接描述

put：简单上传，不可使用进度条

MultipartUpload：分片上传

END