使用VUE+element-ui & 阿里云OSS 完成图片/文件的上传与使用

Z时代
2024-01-10
分类：综合

vue

1、安装Element-ui

npm i element-ui -s

2、安装阿里云的OSS

npm install ali-oss

3、使用element-ui 默认的 upload组件

templeate部分：

        <el-upload
                class=""
                action=""
                :show-file-list="false"
                :http-request="fnUploadRequest"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

由于我们使用了阿里云OSS方案，因此抛弃掉了element自带的上传方式，故class和action写不写无关紧要，需要我们自己重写 http-request 方法

script部分:

 1 //首先第一行引入 ali-oss 插件并配置：
 2 const OSS = require(\'ali-oss\');
 3 const client= new OSS({
 4     accessKeyId: \'your access key\',  // 查看你自己的阿里云KEY
 5     accessKeySecret: \'your access secret\', // 查看自己的阿里云KEYSECRET
 6     bucket: \'your bucket name\', // 你的 OSS bucket 名称
 7     region: \'oss-cn-beijing\', // bucket 所在地址，我的是 华北2 北京
 8     cname:true, // 开启自定义域名上传
 9     endpoint:"file.xxxx.live" // 自己的域名
10 });

为了不透露个人信息，均已修改过

我这里使用了 cname 和 endpoint 也就是支持上传自定义域名，可以到阿里云的管理后台绑定你自己的域名（需要购买），这里有没有域名不影响使用，系统会自动分配，

更多配置查看官方文档：

https://help.aliyun.com/document_detail/64097.html?spm=a2c4g.11186623.6.1414.725d3a07k8kyni

重点代码段:

 1 export default {
 2     name: "upload",
 3     data() {
 4         return {
 5             imageUrl: \'\' 
 6         };
 7     },
 8     methods:{
 9         //图片上传成功回调
10         handleAvatarSuccess(res) {
11             if (res) this.imageUrl = res.url
12         },
13         beforeAvatarUpload(file) { 
14             const isJPG = file.type === \'image/jpeg\';
15             const isLt2M = file.size / 1024 / 1024 < 2;
16 
17             if (!isJPG) {
18                 this.$message.error(\'上传头像图片只能是 JPG 格式!\');
19             }
20             if (!isLt2M) {
21                 this.$message.error(\'上传头像图片大小不能超过 2MB!\');
22             }
23             return isJPG && isLt2M;
24         },
25 
26         async fnUploadRequest(options) {
27             try {
28                 let file = options.file; // 拿到 file
29                 let fileName = file.name.substr(0,file.name.lastIndexOf(\'.\'))
30                 let date = new Date().getTime()
31                 let fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
32                 // 上传文件,这里是上传到OSS的 uploads文件夹下
33                 client.put("uploads/"+fileNames, file).then(res=>{
34                     if (res.res.statusCode === 200) {
35                         options.onSuccess(res)
36                     }else {
37                         options.onError("上传失败")
38                     }
39                 })
40             }catch (e) {
41                 options.onError("上传失败")
42             }
43         }
44     }
45 }

通过手动抛出

options.onSuccess(res) 来调用 handleAvatarSuccess 函数，拿到图片地址

`使用分片上传：`

 1 client.multipartUpload("uploads/"+fileNames, file,{
 2     progress: async function (p) {
 3         let e = {}
 4         e.percent = p * 100
 5         options.onProgress(e)
 6     }
 7 }).then(res=>{
 8     if (res.res.statusCode === 200) {
 9         options.onSuccess(res)
10     }else {
11         options.onError("上传失败")
12     }
13 })

只是把这一点代码更换了而已，跟最基础的 put 上传其实没什么不同，但是分片上传可以断点续传，一般用作大文件，而且返回值也会有所不同

multipartUpload 的第三个参数是一个配置参数，可以参考官方文档