VUE图片分片上传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
  });
}