上传图片到oss

283 阅读1分钟
async upload(){
    const ossConfig = {
      path: '路径',
      host: '地址',
      bucket: '名称'
    };
 
  const sign = await this.$axios.post(getOssSign, ossConfig); // sign获取的文件的地址以及路径等信息
   const fileName = Date.now() + '-' + this.file.name;
   
   //上传单个文件
    const formatFile = formatUploadFile("单个图片或者文件", sign.data.data, fileName);
    await this.$axios.post(sign.data.data.host, formatFile, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: false
    });
     this.fileUrl = commonOssUrl + `${sign.data.data.dir}/${fileName}`;
   }
   
   //上传多个文件
    for (let i = 0; i < list.length; i++) {
        const fileName = list[i].name;
        const formatFile = formatUploadFile(list[i], res.data.data, fileName);
        const resp = this.$axios.post(res.data.data.host, formatFile, {
          headers: { 'Content-Type': 'multipart/form-data' },
          withCredentials: false
        });
        promiseArr.push(resp);
      }
      try {
        const fileList = await Promise.all(promiseArr).then((arr) => {
          return list.map((item) => {
            return `${res.data.data.dir}/${item.name}`;
          });
        });
        return { fileList, uuid: res.data.data.dir.split('/')[1] };
      } catch (error) {
        this.$Message.error({
          content: '上传失败,请重新上传'
        });
      }
   
  formatUploadFile (file, sign, names) {
      const request = new FormData();
      request.append('OSSAccessKeyId', sign.accessid); // Bucket 拥有者的Access Key Id。
      request.append('policy', sign.policy); // policy规定了请求的表单域的合法性
      request.append('Signature', sign.signature); // 根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
      // ---以上都是阿里的认证策略
      request.append('key', `${sign.dir}/${names}`); // 文件名字,可设置路径
      request.append('success_action_status', '200'); // 让服务端返回200,不然,默认会返回204
      request.append('file', file); // 需要上传的文件 file
      // axios.post()
      // return axios.post(sign.host, request, {
      //   headers: { 'Content-Type': 'multipart/form-data' },
      //   withCredentials: false
      // });
      return request;
};