VUE图片上传阿里oss

肖富贵…

已于 2023-06-30 15:52:21 修改

阅读量4.4k

点赞数 6

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-09-15 12:00:24 首次发布

本文链接：https://blog.csdn.net/weixin_40565812/article/details/126867927

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

前言:

OSS的优势可以存放大量静态文件，如果我们用的是硬盘空间比较小的ecs或虚拟主机，就可以考虑使用OSS产品，对大部分个人/企业用户来讲OSS存储安全，可以承受大并发下的上传服务对象存储具有多重冗余架构设计；且基于高可用架构设计，消除单节点故障，跨数据中心的副本冗余，能够保障服务的高可用性，确保数据业务的持续性。

1.安装依赖

npm install ali-oss

2.配置oss上传所需要的参数

const authTemps = () => {
      authTemp()
      .then((res) => {
      state.ossClient = new OSS({
            accessKeyId: res.data.accessKeyId,
            accessKeySecret: res.data.accessKeySecret,
            stsToken: res.data.token,
            bucket: res.data.bucketName,
          });
          state._uploadUrl = res.data.uploadUrl;
        })
        .catch((err) => {
          console.log(err);
        });
    };

 onMounted(() => {
      authTemps();
  });

由后端接口获取,上传之前应该先准备好,我这里是放在mounted里面调用的

2.书写上传页面

 <el-upload
       v-model:file-list="fileList"
       class="upload-demo"
       :action="uploadUrl"
       :on-success="handlUploadsuccess"
       :http-request="ossUploadFileHandle"
       :multiple="false"
       :headers="uploadHeader"
       list-type="picture"
       accept=".png, .jpg, .jpeg"
       :show-file-list="false"
       >
    <el-button type="primary" class="buttonUpdate">
          <el-icon class="el-icon--right"> <Upload /> </el-icon>上传头像
    </el-button>
 </el-upload>

3.上传逻辑处理


//自定义上传
const ossUploadFileHandle = (file) => {
      ossUploadFile(file, 'head_logo').then((res) => {
        state.sss = res.data.relativePath;
        state.profilePhotoPath = res.data.absolutePath;
 });
};
 const ossUploadFile = (params, type) => {
      return new Promise((res) => {
        const file = params.file;
        const storeAs =state._uploadUrl + file.uid +
        file.name.substr(file.name.lastIndexOf("."));
        state.fileName = file.name;
        //分片上传oss
        state.ossClient
          .multipartUpload(storeAs, file)
          .then((results) => {
            res(results.name);
          })
          .catch((err) => {
            console.log(err);
             ElMessage.success("文件上传失败");
          });
      }).then((relativePath) => {
        // 一般的话直接上传成功就可以了,我这边的逻辑还需把oss返回的值在掉一个存储
          临时路径的方法,调用成功之后拿到临时路劲进行保存
        return tempFormal({ relativePath, serveCode: type });
      });
  };
// 上传成功的方法
    const handlUploadsuccess = (response) => {
      console.log(response);
      if (response.code === '0') {
        ElMessage.success('文件上传成功');
      } else {
        // 上传失败的处理
      }
};

4.完整代码

html：
<div class="edituserInfo" v-else>
        <div class="edituserInfo-left">
          <img
            :src="profilePhotoPath"
            alt=""
            v-if="profilePhotoPath"
            style="border-radius: 50%; width: 100px; height: 100px"
          />
          <img
            :src="userinfoData.profilePhotoPath"
            alt=""
            v-else-if="userinfoData.profilePhotoPath"
            style="border-radius: 50%; width: 100px; height: 100px"
          />
          <img
            v-else
            src="../../assets/img/avater.png"
            alt=""
            style="border-radius: 50%; width: 100px; height: 100px"
          />
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="uploadUrl"
            :on-success="handlUploadsuccess"
            :http-request="ossUploadFileHandle"
            :multiple="false"
            :headers="uploadHeader"
            list-type="picture"
            accept=".png, .jpg, .jpeg"
            :show-file-list="false"
          >
            <el-button type="primary" class="buttonUpdate">
              <el-icon class="el-icon--right"> <Upload /> </el-icon>上传头像
            </el-button>
          </el-upload>
        </div>

js:data数据
setup(){
   fileList: [],
   uploadUrl：'',
   profilePhotoPath:'',
   uploadHeader: {},
   ossClient:null
} 
js:方法
const authTemps = () => {
      authTemp()
      .then((res) => {
      state.ossClient = new OSS({
            accessKeyId: res.data.accessKeyId,
            accessKeySecret: res.data.accessKeySecret,
            stsToken: res.data.token,
            bucket: res.data.bucketName,
          });
          state._uploadUrl = res.data.uploadUrl;
        })
        .catch((err) => {
          console.log(err);
        });
    };

 onMounted(() => {
      authTemps();
  });
//自定义上传
const ossUploadFileHandle = (file) => {
      ossUploadFile(file, 'head_logo').then((res) => {
        state.sss = res.data.relativePath;
        state.profilePhotoPath = res.data.absolutePath;
 });
};
 const ossUploadFile = (params, type) => {
      return new Promise((res) => {
        const file = params.file;
        const storeAs =state._uploadUrl + file.uid +
        file.name.substr(file.name.lastIndexOf("."));
        state.fileName = file.name;
        //分片上传oss
        state.ossClient
          .multipartUpload(storeAs, file)
          .then((results) => {
            res(results.name);
          })
          .catch((err) => {
            console.log(err);
             ElMessage.success("文件上传失败");
          });
      }).then((relativePath) => {
        // 一般的话直接上传成功就可以了,我这边的逻辑还需把oss返回的值在掉一个存储
        // 临时路径的方法,调用成功之后拿到临时路劲进行保存
        return tempFormal({ relativePath, serveCode: type });
      });
  };
// 上传成功的方法
    const handlUploadsuccess = (response) => {
      console.log(response);
      if (response.code === '0') {
        ElMessage.success('文件上传成功');
      } else {
        // 上传失败的处理
      }
};
// 获取请求头(根据自己的逻辑存取)
 const accessToken = getToken.value;
      state.uploadHeader = {
        Authorization: `Bearer ${accessToken}`,
};
axios(看需求,我这里是oss成功之后需要在调一次后端提供的临时路径进行二次存储的)
export function tempFormal(data) {
  return request({
    url: '/operation/file/upload/temp2formal',
    method: 'post',
    data
  });
}

5.oss常见上传分为分片上传和直传(上面使用的是分片上传)

OSS（Object Storage Service）是阿里云提供的对象存储服务，可以用于存储和管理大量的非结构化数据，如图片、视频、文档等。

在OSS中，分片上传和直传是两种不同的上传方式，它们有以下区别：

1. 分片上传（Multipart Upload）：将大文件分割成多个小的数据块（分片），并并发地上传这些分片到OSS服务器。分片上传适用于上传大文件，可以提高上传速度和稳定性。分片上传还支持断点续传，即在上传过程中出现异常或中断后，可以从断点处继续上传，而不需要重新上传整个文件。

2. 直传（Put Object）：直接将整个文件一次性上传到OSS服务器。直传适用于上传小文件或者网络条件较好的情况下，可以简化上传过程，减少上传时间。

总结来说，分片上传适用于大文件上传，可以提高上传速度和稳定性，并支持断点续传；而直传适用于小文件上传或者网络条件较好的情况下，可以简化上传过程。

在实际应用中，可以根据文件大小和网络条件选择适合的上传方式。对于大文件，建议使用分片上传；对于小文件，直传可能更加方便快捷。

7.直传代码

 // 图片直传oss
    async afterRead(file, index) {
      const client = new OSS({
        accessKeyId: this.allOssData.accessKeyId,
        accessKeySecret: this.allOssData.accessKeySecret,
        bucket: this.allOssData.bucketName,
        stsToken: this.allOssData.token
      });
      try {
        // 直传使用client.put方法进行上传
        // 注意点:上传方法接收的两个参数(第一个就是上传的到oss上的那个路劲下面要加上唯一的文件名,不然会找不到)
        // 注意点:上传方法接收的两个参数(第二个就是你要上传的file文件)
        const result = await client.put(
          this.allOssData.uploadUrl +
            this.generateRandomId() +
            '.' +
            file.file.name,
          file.file // 使用vant需要取里层的file,原生input不需要
        );
        this.topicData[index].fileList[0].name = result.name;
        Toast('上传成功');
        console.log(this.topicData, 'this.topicData');
        this.$forceUpdate();
      } catch (e) {
        console.error('上传失败：', e);
        Toast.fail('上传失败');
      }