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

1 安装依赖

npm install ali-oss			

2 创建Bucket

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

3 Bucket配置

纯前端使用vue+element+阿里云oss上传图片+分片上传_第2张图片
新建跨域规则
纯前端使用vue+element+阿里云oss上传图片+分片上传_第3张图片

4 Access Key的获取

纯前端使用vue+element+阿里云oss上传图片+分片上传_第4张图片
主账户和子账户都可,因为我们是前端使用,安全起见,建议使用子账户
纯前端使用vue+element+阿里云oss上传图片+分片上传_第5张图片
纯前端使用vue+element+阿里云oss上传图片+分片上传_第6张图片
纯前端使用vue+element+阿里云oss上传图片+分片上传_第7张图片
选择以下两个权限:
在这里插入图片描述
在这里插入图片描述
获取子账户的key
纯前端使用vue+element+阿里云oss上传图片+分片上传_第8张图片
点击进入后,在页面下方创建新的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测试

前端如图:
纯前端使用vue+element+阿里云oss上传图片+分片上传_第9张图片
提交后在控制查看结果:
纯前端使用vue+element+阿里云oss上传图片+分片上传_第10张图片
浏览器输入、查看地址

查看oss控制台
纯前端使用vue+element+阿里云oss上传图片+分片上传_第11张图片
纯前端使用vue+element+阿里云oss上传图片+分片上传_第12张图片

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

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

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

你可能感兴趣的:(javascript,vue.js,阿里云,vue)