纯前端使用vue+element+阿里云oss上传图片+分片上传

1 安装依赖

npm install ali-oss			

2 创建Bucket

3 Bucket配置

新建跨域规则

4 Access Key的获取

主账户和子账户都可，因为我们是前端使用，安全起见，建议使用子账户



选择以下两个权限：


获取子账户的key

点击进入后，在页面下方创建新的AccessKey，获得账号密码，保存下来备用

5 前端部分

使用element的el-upload组件，这里只展示组件部分代码

<el-form-item label="图片" prop="file">
            <el-upload
              action=""
              ref="upload"
              :class="{ disabled: uploadDisabled }"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :auto-upload="false"
              accept="image/*"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

因为这里我使用的是表单，所以我是先把图片上传了oss后，返回url再传给后端，这里就主要演示怎么把图片传到oss上

表单点击提交事件

submitForm(ruleForm) {
     
        this.$refs[ruleForm].validate((valid) => {
     
        if (valid) {
     
              //阿里云oss配置
           let OSS = require('ali-oss')
           let file = this.ruleForm.file//把文件从拿过来
           let client = new OSS({
     
             region: 'oss-cn-hangzhou',//根据那你的Bucket地点来填写
             accessKeyId: 'LTAI**************JDT3c4',//自己账户的accessKeyId
             accessKeySecret: 'r5mZ******************ocnDGwDj',//自己账户的accessKeySecret
             bucket: 'minedates',//bucket名字
           });

          //开始分片上传。
          async function multipartUpload () {
     
            try {
     
              //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
              let result = await client.multipartUpload(file.name, file, {
     
              headers: {
     
                'Content-Disposition': 'inline',
                'Content-Type': 'png'//注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
              }
            });
            console.log(result);
            let head = await client.head(file.name);
            console.log(head);
            } catch (e) {
     
             // 捕获超时异常。
              if (e.code === 'ConnectionTimeoutError') {
     
                console.log("TimeoutError");
                // do ConnectionTimeoutError operation
              }
              console.log(e)
            }
          }
          
          multipartUpload();//调用函数

          } else {
     
            console.log('error submit!!');
            return false;
          }
        });
      },

为什么设置’Content-Type’: 'png’

headers: {
     
                'Content-Disposition': 'inline',
                'Content-Type': 'png'//注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
              }

不设置也可以，不设置的话，默认情况下，上传图片后默认’Content-Type’是‘image/png’，这样的话，通过图片url访问图片不是预览，而是直接下载，其他文件也一样，视频等。这里需要大家利用js来发挥一下，判断文件的格式来动态改变Content-Type，’.png’就用png，’.jpg’的就用jpg，以此类推。

6测试

前端如图：

提交后在控制查看结果：

浏览器输入、查看地址

查看oss控制台

7 最后，我是第一次写博客，有什么不好的地方请多多包含，谢谢大家！

最后根据oss返回的地址再传给后端即可。

本文出现资源有：Element的upload
阿里云oss分片上传