华为云OBS文件上传和下载

最新推荐文章于 2025-07-19 13:58:30 发布

huaiqiongying

最新推荐文章于 2025-07-19 13:58:30 发布

阅读量1.8w

点赞数 10

CC 4.0 BY-SA版权

文章标签： java vue javascript js post

本文链接：https://blog.csdn.net/boomxiaolong/article/details/103765304

华为云Obs文件上传和下载

使用的技术

前端是Vue框架，element-ui
后端是Springboot项目
服务器是华为云
文件上传下载地方是华为云Obs对象存储服务

1、前端上传代码

el-upload组件：

<el-upload
    class="upload-demo"
    ref="upload"
    action
    :limit="limitNum"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove"
    :http-request="myUpload"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">服务器容量有限，尽量不要上传大文件！</div>
  </el-upload>

方法：

methods: {
   
   
      // 手动上传操作
      submitUpload() {
   
   
        // 触发自定义的上传方法 myUpload
        this.$refs.upload.submit();
      },
      // 覆盖默认的上传行为，自定义上传的实现，有几个文件就会调用这个方法几次
      myUpload(fileObj) {
   
   
        let formData = new FormData();
        formData.set('file', fileObj.file);
        this.$api.fileUpload(formData)
          .then(response => {
   
   
            if (response.data.success === true) {
   
   
              this.$notify({
   
   
                title: '上传成功',
                message: response.data.re.name + '上传成功！',
                type: 'success'
              });
              // 清空已上传的文件列表
              this.$refs.upload.clearFiles();
            } else {
   
   
              this.$notify.error({
   
   
                title: '上传失败',
                message: '上传失败，请重试！'
              });
            }
          })
          .catch(error => {
   
   
            this.$message('发生错误了！'