vue华为云使用预签名 URL 上传文件

Vue.js 和华为云结合使用预签名URL（Pre-signed URLs）上传文件通常是在前端开发中实现无服务器端介入的文件上传操作。预签名URL是一种临时的、安全的访问链接，它允许在特定时间内访问存储在华为云OSS（Object Storage Service）中的文件，而无需提供额外的身份验证信息。

以下是使用Vue.js和华为云OSS的预签名URL上传文件的一般步骤：

1. **安装依赖**：首先需要安装`axios`库用于发送HTTP请求，以及处理文件流。

npm install axios file-saver

2. **获取预签名URL**：在后端服务器上，通过华为云提供的SDK生成一个具有有效期的预签名URL。这需要有服务账号的密钥。

3. **创建上传组件**：在Vue组件中，创建一个表单或者按钮触发文件选择，并使用`axios`发起POST请求，将文件数据附加上预签名URL作为上传目标。

<template>
  <input type="file" @change="uploadFile" />
</template>

<script>
export default {
  methods: {
    uploadFile(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      this.$axios.post('/upload', formData, {
        headers: {'Content-Type': 'multipart/form-data'},
      })
        .then(response => {
          console.log('上传成功:', response.data);
        })
        .catch(error => {
          console.error('上传失败:', error);
        });
    },
  },
}
</script>

4. **处理返回结果**：服务器返回的响应通常包含新的文件地址或者其他相关的上传状态信息。

5. **安全提示**：确保处理预签名URL的生命周期，避免过期导致上传失败。